:root {
    /* Primary "Purple" Shades → remapped to Azure Blues */
    --purple-50:  #EFF6FC;
    --purple-100: #DEECF9;
    --purple-200: #C7E0F4;
    --purple-300: #A7D2F0;
    --purple-400: #69AFE5;
    --purple-500: #3A96DD;
    --purple-600: #0078D4; /* Azure brand */
    --purple-700: #106EBE; /* Hover/active */
    --purple-800: #005A9E;
    --purple-900: #004578;
    --purple-950: #002B4E;

    /* Pink/Magenta Shades (kept for accent where needed) */
    --pink-50: #fdf2f8;
    --pink-100: #fce7f3;
    --pink-200: #fbcfe8;
    --pink-300: #f9a8d4;
    --pink-400: #f472b6;
    --pink-500: #ec4899;
    --pink-600: #db2777;
    --pink-700: #be185d;
    --pink-800: #9d174d;
    --pink-900: #831843;
    --pink-950: #701a75;

    /* Cyan/Blue Shades (kept) */
    --cyan-50: #ecfeff;
    --cyan-100: #cffafe;
    --cyan-200: #a5f3fc;
    --cyan-300: #67e8f9;
    --cyan-400: #22d3ee;
    --cyan-500: #06b6d4;
    --cyan-600: #0891b2;
    --cyan-700: #0e7490;
    --cyan-800: #155e75;
    --cyan-900: #164e63;
    --cyan-950: #083344;

    /* Green Shades (kept) */
    --green-50: #f0fdf4;
    --green-100: #dcfce7;
    --green-200: #bbf7d0;
    --green-300: #86efac;
    --green-400: #4ade80;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-700: #15803d;
    --green-800: #166534;
    --green-900: #14532d;
    --green-950: #052e16;

    /* Gray Shades (kept) */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --gray-950: #030712;

    /* Slate Shades (kept) */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;

    /* Dark Theme Colors (Azure Night) */
    --dark-primary: var(--purple-600);      /* #0078D4 */
    --dark-secondary: var(--purple-700);    /* #106EBE */
    --dark-accent: var(--cyan-500);         /* subtle teal */
    --dark-accent-2: var(--pink-500);       /* optional pink accent */
    --dark-accent-3: var(--green-500);
    --dark-bg-primary: #001B2E;             /* deep navy */
    --dark-bg-secondary: #002B4E;
    --dark-bg-tertiary: #00335F;
    --dark-bg-quaternary: #003A6B;
    --dark-text: var(--slate-50);
    --dark-border: rgba(0, 120, 212, 0.20);
    --dark-shadow: rgba(0, 120, 212, 0.10);
    
    /* Light Theme Colors (Azure Sky) */
    --light-primary: var(--purple-600);     /* #0078D4 */
    --light-secondary: var(--purple-700);   /* #106EBE */
    --light-accent: var(--purple-600);
    --light-accent-2: var(--purple-700);
    --light-accent-3: var(--purple-800);
    --light-bg-primary: var(--gray-50);
    --light-bg-secondary: var(--slate-50);
    --light-bg-tertiary: var(--slate-100);
    --light-bg-quaternary: var(--slate-200);
    --light-text: var(--slate-900);
    --light-border: rgba(0, 120, 212, 0.15);
    --light-shadow: rgba(0, 120, 212, 0.10);
    
    /* Common Colors */
    --white: #ffffff;
    --black: #000000;
    --transparent: transparent;
    
    /* Alpha Variants - White */
    --white-02: rgba(255, 255, 255, 0.02);
    --white-03: rgba(255, 255, 255, 0.03);
    --white-05: rgba(255, 255, 255, 0.05);
    --white-08: rgba(255, 255, 255, 0.08);
    --white-10: rgba(255, 255, 255, 0.1);
    --white-12: rgba(255, 255, 255, 0.12);
    --white-15: rgba(255, 255, 255, 0.15);
    --white-20: rgba(255, 255, 255, 0.2);
    --white-25: rgba(255, 255, 255, 0.25);
    --white-30: rgba(255, 255, 255, 0.3);
    --white-40: rgba(255, 255, 255, 0.4);
    --white-50: rgba(255, 255, 255, 0.5);
    --white-60: rgba(255, 255, 255, 0.6);
    --white-70: rgba(255, 255, 255, 0.7);
    --white-80: rgba(255, 255, 255, 0.8);
    --white-90: rgba(255, 255, 255, 0.9);
    --white-95: rgba(255, 255, 255, 0.95);
    --white-96: rgba(255, 255, 255, 0.96);
    --white-97: rgba(255, 255, 255, 0.97);

    /* Alpha Variants - Black */
    --black-05: rgba(0, 0, 0, 0.05);
    --black-08: rgba(0, 0, 0, 0.08);
    --black-10: rgba(0, 0, 0, 0.1);
    --black-12: rgba(0, 0, 0, 0.12);
    --black-15: rgba(0, 0, 0, 0.15);
    --black-20: rgba(0, 0, 0, 0.2);
    --black-25: rgba(0, 0, 0, 0.25);
    --black-30: rgba(0, 0, 0, 0.3);
    --black-40: rgba(0, 0, 0, 0.4);
    --black-50: rgba(0, 0, 0, 0.5);
    --black-60: rgba(0, 0, 0, 0.6);
    --black-70: rgba(0, 0, 0, 0.7);
    --black-80: rgba(0, 0, 0, 0.8);
    --black-85: rgba(0, 0, 0, 0.85);
    --black-90: rgba(0, 0, 0, 0.9);
    
    /* "Purple" Alpha Variants → Azure Blue RGBA (0,120,212) */
    --purple-05: rgba(0, 120, 212, 0.05);
    --purple-08: rgba(0, 120, 212, 0.08);
    --purple-10: rgba(0, 120, 212, 0.10);
    --purple-12: rgba(0, 120, 212, 0.12);
    --purple-15: rgba(0, 120, 212, 0.15);
    --purple-20: rgba(0, 120, 212, 0.20);
    --purple-25: rgba(0, 120, 212, 0.25);
    --purple-30: rgba(0, 120, 212, 0.30);
    --purple-35: rgba(0, 120, 212, 0.35);
    --purple-40: rgba(0, 120, 212, 0.40);
    --purple-50-alpha: rgba(0, 120, 212, 0.50);
    --purple-60: rgba(0, 120, 212, 0.60);
    --purple-70: rgba(0, 120, 212, 0.70);
    --purple-80: rgba(0, 120, 212, 0.80);
    --purple-90: rgba(0, 120, 212, 0.90);

    /* Purple Secondary Alpha Variants → Azure Secondary (16,110,190) */
    --purple-secondary-05: rgba(16, 110, 190, 0.05);
    --purple-secondary-08: rgba(16, 110, 190, 0.08);
    --purple-secondary-10: rgba(16, 110, 190, 0.10);
    --purple-secondary-12: rgba(16, 110, 190, 0.12); /* added to match usage */
    --purple-secondary-15: rgba(16, 110, 190, 0.15);
    --purple-secondary-20: rgba(16, 110, 190, 0.20);
    --purple-secondary-25: rgba(16, 110, 190, 0.25);
    --purple-secondary-30: rgba(16, 110, 190, 0.30);
    --purple-secondary-40: rgba(16, 110, 190, 0.40);
    --purple-secondary-50: rgba(16, 110, 190, 0.50);
    --purple-secondary-60: rgba(16, 110, 190, 0.60);
    --purple-secondary-80: rgba(16, 110, 190, 0.80);
    
    /* Pink Alpha Variants (kept) */
    --pink-05: rgba(236, 72, 153, 0.05);
    --pink-08: rgba(236, 72, 153, 0.08);
    --pink-10: rgba(236, 72, 153, 0.1);
    --pink-15: rgba(236, 72, 153, 0.15);
    --pink-20: rgba(236, 72, 153, 0.2);
    --pink-25: rgba(236, 72, 153, 0.25);
    --pink-30: rgba(236, 72, 153, 0.3);
    --pink-40: rgba(236, 72, 153, 0.4);
    --pink-50-alpha: rgba(236, 72, 153, 0.5);
    --pink-60: rgba(236, 72, 153, 0.6);
    --pink-70: rgba(236, 72, 153, 0.7);
    --pink-80: rgba(236, 72, 153, 0.8);

    /* Cyan Alpha Variants (kept) */
    --cyan-05: rgba(6, 182, 212, 0.05);
    --cyan-10: rgba(6, 182, 212, 0.10);
    --cyan-15: rgba(6, 182, 212, 0.15);
    --cyan-20: rgba(6, 182, 212, 0.20);
    --cyan-30: rgba(6, 182, 212, 0.30);

    /* Green Alpha Variants (kept or use below Success) */
    --green-05: rgba(34, 197, 94, 0.05);
    --green-10: rgba(34, 197, 94, 0.10);
    --green-15: rgba(34, 197, 94, 0.15);
    --green-20: rgba(34, 197, 94, 0.20);
    --green-30: rgba(34, 197, 94, 0.30);
    --green-50-alpha: rgba(34, 197, 94, 0.50);

    /* Background Gradient Colors (Azure-flavored) */
    --dark-bg-gradient-1: var(--purple-15);
    --dark-bg-gradient-2: var(--purple-secondary-12);
    --dark-bg-gradient-3: var(--pink-08);
    --dark-bg-gradient-start: #001B2E;
    --dark-bg-gradient-mid-1: #002B4E;
    --dark-bg-gradient-mid-2: #004578;
    --dark-bg-gradient-end: #0A2540;
    
    --light-bg-gradient-1: var(--purple-08);
    --light-bg-gradient-2: var(--purple-secondary-05);
    --light-bg-gradient-3: var(--purple-05);
    --light-bg-gradient-start: var(--white);
    --light-bg-gradient-mid-1: var(--slate-50);
    --light-bg-gradient-mid-2: var(--purple-50);
    --light-bg-gradient-end: var(--slate-100);
    
    /* Special Background Colors */
    --navbar-dark-bg: rgba(0, 27, 46, 0.96);
    --navbar-light-bg: var(--white-95);
    --header-dark-bg: rgba(0, 27, 46, 0.96);
    --header-light-bg: var(--white-95);
    --dropdown-dark-bg: rgba(0, 27, 46, 0.97);
    --dropdown-light-bg: var(--white-96);
    --tooltip-dark-bg: rgba(0, 27, 46, 0.95);
    --tooltip-light-bg: var(--white-95);
    
    /* Complex Gradients */
    --dark-gradient-1: radial-gradient(circle at 20% 80%, var(--dark-bg-gradient-1) 0%, var(--transparent) 50%);
    --dark-gradient-2: radial-gradient(circle at 80% 20%, var(--dark-bg-gradient-2) 0%, var(--transparent) 50%);
    --dark-gradient-3: radial-gradient(circle at 40% 40%, var(--dark-bg-gradient-3) 0%, var(--transparent) 50%);
    --dark-gradient-main: linear-gradient(135deg, var(--dark-bg-gradient-start) 0%, var(--dark-bg-gradient-mid-1) 40%, var(--dark-bg-gradient-mid-2) 70%, var(--dark-bg-gradient-end) 100%);
    
    --light-gradient-1: radial-gradient(circle at 25% 75%, var(--light-bg-gradient-1) 0%, var(--transparent) 50%);
    --light-gradient-2: radial-gradient(circle at 75% 25%, var(--light-bg-gradient-2) 0%, var(--transparent) 50%);
    --light-gradient-3: radial-gradient(circle at 50% 50%, var(--light-bg-gradient-3) 0%, var(--transparent) 55%);
    --light-gradient-main: linear-gradient(135deg, var(--light-bg-gradient-start) 0%, var(--light-bg-gradient-mid-1) 35%, var(--light-bg-gradient-mid-2) 65%, var(--light-bg-gradient-end) 100%);

    /* Status Colors (Azure/Fluent-inspired) */
    --success-primary: #107C10;
    --success-secondary: #0B6A0B;
    --success-light: rgba(16, 124, 16, 0.10);
    --success-medium: rgba(16, 124, 16, 0.20);
    --success-border: rgba(16, 124, 16, 0.30);
    --success-hover: rgba(16, 124, 16, 0.20);
    --success-strong: rgba(16, 124, 16, 0.50);
    --success-shadow: rgba(16, 124, 16, 0.30);
    
    --error-primary: #D13438;
    --error-secondary: #A80000;
    --error-light: rgba(209, 52, 56, 0.10);
    --error-border: rgba(209, 52, 56, 0.30);
    --error-hover: rgba(209, 52, 56, 0.20);
    --error-shadow: rgba(209, 52, 56, 0.30);
    
    --warning-primary: #FFB900;
    --warning-secondary: #F59E0B;
    --warning-light: rgba(255, 185, 0, 0.10);
    --warning-medium: rgba(255, 185, 0, 0.20);
    --warning-border: rgba(255, 185, 0, 0.30);
    --warning-hover: rgba(255, 185, 0, 0.50);
    --warning-strong: rgba(255, 185, 0, 0.40);
    --warning-shadow: rgba(255, 185, 0, 0.30);
    --warning-focus: rgba(255, 185, 0, 0.60);
    
    --info-primary: #0078D4;
    --info-secondary: #106EBE;
    --info-light: rgba(0, 120, 212, 0.10);
    --info-medium: rgba(0, 120, 212, 0.15);
    --info-border: rgba(0, 120, 212, 0.30);
    --info-hover: rgba(0, 120, 212, 0.20);
    --info-strong: rgba(0, 120, 212, 0.40);
    --info-focus: rgba(0, 120, 212, 0.50);
    --info-shadow: rgba(0, 120, 212, 0.30);
    
    /* Neutral Colors (kept) */
    --neutral-light: var(--gray-400);
    --neutral-medium: var(--gray-500);
    --neutral-dark: var(--gray-700);
    --neutral-bg-light: rgba(156, 163, 175, 0.10);
    --neutral-bg-medium: rgba(156, 163, 175, 0.20);
    --neutral-border: rgba(156, 163, 175, 0.30);
    --neutral-medium-bg: rgba(107, 114, 128, 0.10);
    --neutral-medium-border: rgba(107, 114, 128, 0.30);

    /* Silver Colors (kept for compatibility) */
    --silver: #c0c0c0;
    --silver-light: #d8d8d8;
    --silver-dark: #a8a8a8;
    --silver-alpha-10: rgba(192, 192, 192, 0.10);
    --silver-alpha-20: rgba(192, 192, 192, 0.20);
    --silver-alpha-30: rgba(192, 192, 192, 0.30);
    --silver-alpha-50: rgba(192, 192, 192, 0.50);
}