:root {
    /* 
      1. Colors 
      (Ported from design-system.css + refined)
    */
    --White: #FFFFFF;
    --Black: #000000;

    /* Brand Colors (Wright) */
    --primary-light: #F9DE7A;
    --primary-main: #C3A639; /* Gold-ish */
    --primary-dark: #836E23;

    /* Semantic Palettes */
    --pink-light: #FFEBFC;
    --pink-medium: #FAA8F1;
    --pink-dark: #D57BC8;

    --teal-light: #E5FFFB;
    --teal-medium: #96DDCC;
    --teal-dark: #579888;

    --purple-light: #EFEBFF;
    --purple-medium: #D9D0FC;
    --purple-dark: #C0B1F8;

    /* Greyscale (Neutral) */
    --Grey-50: #F9FAFB;
    --Grey-100: #F2F4F7;
    --Grey-200: #EAECF0;
    --Grey-300: #D0D5DD;
    --Grey-400: #98A2B3;
    --Grey-500: #667085;
    --Grey-600: #475467;
    --Grey-700: #344054;
    --Grey-800: #1D2939;
    --Grey-900: #101828;

    /* Functional Colors */
    --success-light: #EAFFEC;
    --success-medium: #41B873;
    --success-dark: #027A48;
    
    --error-light: #FFEAEA;
    --error-medium: #D92F2F;
    --error-dark: #B42318;

    --warning-light: #FFFAEB;
    --warning-medium: #F79009;
    --warning-dark: #B54708;

    --sage-light: #F8FFE5;
    --sage-medium: #9EA683;

    /* 
       LEGACY ALIASES (Do not remove until all usages are updated)
       These map old CamelCase/MixedCase variables to the new standard ones.
    */
    --pink-Dark: var(--pink-dark);
    --Teal-light: var(--teal-light);
    
    --Success-Light: var(--success-light);
    --Success-Medium: var(--success-medium);
    
    --Error-Light: var(--error-light);
    --Error-Medium: var(--error-medium);
    
    --Sage-light: var(--sage-light);
    --Sage-Medium: var(--sage-medium);

    /* 
       2. Typography 
       Uniform font sizes and line heights
    */
    --font-family-base: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: 'Fantasque Sans Mono', 'Courier New', Courier, monospace;

    /* Scale */
    --font-size-xs: 12px;   /* 0.75rem */
    --font-size-sm: 14px;   /* 0.875rem */
    --font-size-base: 16px; /* 1rem */
    --font-size-lg: 18px;   /* 1.125rem */
    --font-size-xl: 20px;   /* 1.25rem */
    --font-size-2xl: 24px;  /* 1.5rem */
    --font-size-3xl: 30px;  /* 1.875rem */
    --font-size-4xl: 36px;  /* 2.25rem */
    --font-size-5xl: 48px;  /* 3rem */
    --font-size-6xl: 60px;  /* 3.75rem */

    /* Legacy numerical sizes (keeping for backward compatibility) */
    --font-size-8: 8px;
    --font-size-10: 10px;
    --font-size-12: 12px;
    --font-size-14: 14px;
    --font-size-15: 15px;
    --font-size-16: 16px;
    --font-size-18: 18px;
    --font-size-20: 20px;
    --font-size-22: 22px;
    --font-size-24: 24px;
    --font-size-26: 26px;
    --font-size-28: 28px;
    --font-size-30: 30px;
    --font-size-32: 32px;
    --font-size-34: 34px;
    --font-size-36: 36px;
    --font-size-38: 38px;
    --font-size-40: 40px;
    --font-size-42: 42px;

    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.75;

    /* Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* 
       3. Spacing 
       Base unit: 4px (Material Design / Tailwind style)
    */
    --space-0: 0px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* Layout Containers */
    --container-width-sm: 640px;
    --container-width-md: 768px;
    --container-width-lg: 1024px;
    --container-width-xl: 1280px;
    --container-width-2xl: 1400px; /* Modern wide screens */

    /* 
       4. Borders & Radius 
    */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    --border-width-1: 1px;
    --border-width-2: 2px;

    /* 
       5. Shadows (Elevation)
    */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}