:root {




    --color-primary-500: #149ff5;
    --color-primary-500-rgb: 20, 159, 245;
    --color-primary-50: #daeefb;
    --color-primary-50-rgb: 218, 238, 251;
    --color-primary-100: #c1e5fb;
    --color-primary-100-rgb: 193, 229, 251;
    --color-primary-200: #8ed1fa;
    --color-primary-200-rgb: 142, 209, 250;
    --color-primary-300: #5dbdf8;
    --color-primary-300-rgb: 93, 189, 248;
    --color-primary-400: #2ca9f6;
    --color-primary-400-rgb: 44, 169, 246;
    --color-primary-600: #0493ec;
    --color-primary-600-rgb: 4, 147, 236;
    --color-primary-700: #0374ba;
    --color-primary-700-rgb: 3, 116, 186;
    --color-primary-800: #025487;
    --color-primary-800-rgb: 2, 84, 135;
    --color-primary-900: #043553;
    --color-primary-900-rgb: 4, 53, 83;
    --color-primary-950: #02253b;
    --color-primary-950-rgb: 2, 37, 59;
    --color-primary-light: #f2f9fd;
    --color-primary-light-rgb: 242, 249, 253;
    --color-primary-dark: #010c13;
    --color-primary-dark-rgb: 1, 12, 19;


    --color-secondary-500: #3e6fd0;
    --color-secondary-500-rgb: 62, 111, 208;
    --color-secondary-50: #e4eaf6;
    --color-secondary-50-rgb: 228, 234, 246;
    --color-secondary-100: #cfdbf1;
    --color-secondary-100-rgb: 207, 219, 241;
    --color-secondary-200: #a5bce9;
    --color-secondary-200-rgb: 165, 188, 233;
    --color-secondary-300: #7c9ddf;
    --color-secondary-300-rgb: 124, 157, 223;
    --color-secondary-400: #537ed5;
    --color-secondary-400-rgb: 83, 126, 213;
    --color-secondary-600: #2a60cb;
    --color-secondary-600-rgb: 42, 96, 203;
    --color-secondary-700: #214ca0;
    --color-secondary-700-rgb: 33, 76, 160;
    --color-secondary-800: #183876;
    --color-secondary-800-rgb: 24, 56, 118;
    --color-secondary-900: #12254a;
    --color-secondary-900-rgb: 18, 37, 74;
    --color-secondary-950: #0d1a35;
    --color-secondary-950-rgb: 13, 26, 53;
    --color-secondary-light: #f8f9fc;
    --color-secondary-light-rgb: 248, 249, 252;
    --color-secondary-dark: #050a14;
    --color-secondary-dark-rgb: 5, 10, 20;





    --color-background: #d6ebff;
    --color-text: #1f2947;
    --color-text-light: #efebeb;



--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;






--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;

}