:root {




    --color-primary-500: #b344f0;
    --color-primary-500-rgb: 179, 68, 240;
    --color-primary-50: #ffffff;
    --color-primary-50-rgb: 255, 255, 255;
    --color-primary-100: #f6eafd;
    --color-primary-100-rgb: 246, 234, 253;
    --color-primary-200: #e3baf9;
    --color-primary-200-rgb: 227, 186, 249;
    --color-primary-300: #d08bf6;
    --color-primary-300-rgb: 208, 139, 246;
    --color-primary-400: #bd5cf2;
    --color-primary-400-rgb: 189, 92, 242;
    --color-primary-600: #ab27f4;
    --color-primary-600-rgb: 171, 39, 244;
    --color-primary-700: #920bdc;
    --color-primary-700-rgb: 146, 11, 220;
    --color-primary-800: #7209ac;
    --color-primary-800-rgb: 114, 9, 172;
    --color-primary-900: #510a78;
    --color-primary-900-rgb: 81, 10, 120;
    --color-primary-950: #410860;
    --color-primary-950-rgb: 65, 8, 96;
    --color-primary-light: #ffffff;
    --color-primary-light-rgb: 255, 255, 255;
    --color-primary-dark: #27053b;
    --color-primary-dark-rgb: 39, 5, 59;


    --color-secondary-500: #6b7280;
    --color-secondary-500-rgb: 107, 114, 128;
    --color-secondary-50: #dcdcdc;
    --color-secondary-50-rgb: 220, 220, 220;
    --color-secondary-100: #cdced1;
    --color-secondary-100-rgb: 205, 206, 209;
    --color-secondary-200: #afb3bc;
    --color-secondary-200-rgb: 175, 179, 188;
    --color-secondary-300: #9399a5;
    --color-secondary-300-rgb: 147, 153, 165;
    --color-secondary-400: #777f8d;
    --color-secondary-400-rgb: 119, 127, 141;
    --color-secondary-600: #5a6477;
    --color-secondary-600-rgb: 90, 100, 119;
    --color-secondary-700: #444c5a;
    --color-secondary-700-rgb: 68, 76, 90;
    --color-secondary-800: #2e333d;
    --color-secondary-800-rgb: 46, 51, 61;
    --color-secondary-900: #1a1b1f;
    --color-secondary-900-rgb: 26, 27, 31;
    --color-secondary-950: #0e0f11;
    --color-secondary-950-rgb: 14, 15, 17;
    --color-secondary-light: #e8e8e8;
    --color-secondary-light-rgb: 232, 232, 232;
    --color-secondary-dark: #000000;
    --color-secondary-dark-rgb: 0, 0, 0;








--color-slate-50: #f8fafc;
--color-slate-50-rgb: 248, 250, 252;
--color-slate-100: #f1f5f9;
--color-slate-100-rgb: 241, 245, 249;
--color-slate-200: #e2e8f0;
--color-slate-200-rgb: 226, 232, 240;
--color-slate-300: #cbd5e1;
--color-slate-300-rgb: 203, 213, 225;
--color-slate-400: #94a3b8;
--color-slate-400-rgb: 148, 163, 184;
--color-slate-500: #64748b;
--color-slate-500-rgb: 100, 116, 139;
--color-slate-600: #475569;
--color-slate-600-rgb: 71, 85, 105;
--color-slate-700: #334155;
--color-slate-700-rgb: 51, 65, 85;
--color-slate-800: #1e293b;
--color-slate-800-rgb: 30, 41, 59;
--color-slate-900: #0f172a;
--color-slate-900-rgb: 15, 23, 42;
--color-slate-950: #020617;
--color-slate-950-rgb: 2, 6, 23;

/* 🎨 Green colors */
--color-green-50: #f0fdf4;
--color-green-50-rgb: 240, 253, 244;
--color-green-100: #dcfce7;
--color-green-100-rgb: 220, 252, 231;
--color-green-200: #bbf7d0;
--color-green-200-rgb: 187, 247, 208;
--color-green-300: #86efac;
--color-green-300-rgb: 134, 239, 172;
--color-green-400: #4ade80;
--color-green-400-rgb: 74, 222, 128;
--color-green-500: #22c55e;
--color-green-500-rgb: 34, 197, 94;
--color-green-600: #16a34a;
--color-green-600-rgb: 22, 163, 74;
--color-green-700: #15803d;
--color-green-700-rgb: 21, 128, 61;
--color-green-800: #166534;
--color-green-800-rgb: 22, 101, 52;
--color-green-900: #14532d;
--color-green-900-rgb: 20, 83, 45;
--color-green-950: #052e16;
--color-green-950-rgb: 5, 46, 22;

/* 🎨 Yellow colors */
--color-yellow-50: #fefce8;
--color-yellow-50-rgb: 254, 252, 232;
--color-yellow-100: #fef9c3;
--color-yellow-100-rgb: 254, 249, 195;
--color-yellow-200: #fef08a;
--color-yellow-200-rgb: 254, 240, 138;
--color-yellow-300: #fde047;
--color-yellow-300-rgb: 253, 224, 71;
--color-yellow-400: #facc15;
--color-yellow-400-rgb: 250, 204, 21;
--color-yellow-500: #eab308;
--color-yellow-500-rgb: 234, 179, 8;
--color-yellow-600: #ca8a04;
--color-yellow-600-rgb: 202, 138, 4;
--color-yellow-700: #a16207;
--color-yellow-700-rgb: 161, 98, 7;
--color-yellow-800: #854d0e;
--color-yellow-800-rgb: 133, 77, 14;
--color-yellow-900: #713f12;
--color-yellow-900-rgb: 113, 63, 18;
--color-yellow-950: #422006;
--color-yellow-950-rgb: 66, 32, 6;

/* 🎨 Red color variables */
--color-red-50: #fef2f2;
--color-red-50-rgb: 254, 242, 242;
--color-red-100: #fee2e2;
--color-red-100-rgb: 254, 226, 226;
--color-red-200: #fecaca;
--color-red-200-rgb: 254, 202, 202;
--color-red-300: #fca5a5;
--color-red-300-rgb: 252, 165, 165;
--color-red-400: #f87171;
--color-red-400-rgb: 248, 113, 113;
--color-red-500: #ef4444;
--color-red-500-rgb: 239, 68, 68;
--color-red-600: #dc2626;
--color-red-600-rgb: 220, 38, 38;
--color-red-700: #b91c1c;
--color-red-700-rgb: 185, 28, 28;
--color-red-800: #991b1b;
--color-red-800-rgb: 153, 27, 27;
--color-red-900: #7f1d1d;
--color-red-900-rgb: 127, 29, 29;
--color-red-950: #450a0a;
--color-red-950-rgb: 69, 10, 10;



    --color-background: var(--color-slate-50);
    --color-text: var(--color-secondary-dark);
    --color-text-light: var(--color-slate-50);



--nav-gradient-start: var(--color-primary-700);
--nav-gradient-middle: var(--color-primary-500);

--nav-gradient-end: var(--color-primary-700);
--nav-link-hover: var(--color-secondary-950);
--nav-link-active: var(--color-secondary-950);

--shadow: 0 0 10px rgba(0, 0, 0, 0.2);
--shadow-hover: 0 0 20px rgba(0, 0, 0, 0.2);
--shadow-active: 0 0 30px rgba(0, 0, 0, 0.2);
--shadow-focus: 0 0 40px rgba(0, 0, 0, 0.2);

--shadow-small: 0 0 5px rgba(0, 0, 0, 0.2);
--shadow-small-hover: 0 0 10px rgba(0, 0, 0, 0.2);
--shadow-small-active: 0 0 15px rgba(0, 0, 0, 0.2);
--shadow-small-focus: 0 0 20px rgba(0, 0, 0, 0.2);

--shadow-large: 0 0 20px rgba(0, 0, 0, 0.2);
--shadow-large-hover: 0 0 40px rgba(0, 0, 0, 0.2);
--shadow-large-active: 0 0 60px rgba(0, 0, 0, 0.2);
--shadow-large-focus: 0 0 80px rgba(0, 0, 0, 0.2);

--shadow-medium: 0 0 15px rgba(0, 0, 0, 0.2);
--shadow-medium-hover: 0 0 30px rgba(0, 0, 0, 0.2);
--shadow-medium-active: 0 0 45px rgba(0, 0, 0, 0.2);
--shadow-medium-focus: 0 0 60px rgba(0, 0, 0, 0.2);

--shadow-xlarge: 0 0 30px rgba(0, 0, 0, 0.2);
--shadow-xlarge-hover: 0 0 60px rgba(0, 0, 0, 0.2);
--shadow-xlarge-active: 0 0 90px rgba(0, 0, 0, 0.2);

--nav-hover-bg: rgba(255, 255, 255, 0.1);

--dropdown-bg: rgba(var(--color-primary-600-rgb), 0.6);
--dropdown-blur: 10px;

--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--card-bg: var(--color-secondary-900);
--card-hover-bg: var(--color-secondary-800);
--card-text: var(--color-secondary-50);
--card-shadow: var(--shadow-medium);
--card-hover-shadow: var(--shadow-large);
--card-border-radius: 8px;
--card-transition: all 0.3s ease;

--transition: all 0.5s ease-in-out;
--glass-bg: rgba(255, 255, 255, 0.1);
--glass-border: rgba(255, 255, 255, 0.3);

/* Scrollbar Variables */
--scrollbar-width: 8px;
--scrollbar-track-color: var(--color-slate-200);
--scrollbar-thumb-color: var(--color-primary-500);
--scrollbar-thumb-hover-color: var(--color-primary-700);
--scrollbar-border-radius: 4px;

}