:root {

    --White: #FFFFFF;
    --Black: #000000;

    --primary-light: #F9DE7A;
    --primary-main: #C3A639;
    --primary-dark: #836E23;

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

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

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

    /* WCAG AA text semantics (>= 5:1 on white unless noted) */
    --text-muted: var(--Grey-600);
    --text-muted-strong: var(--Grey-700);
    --text-link-pink: #7A2870;
    --text-link-teal: #25594D;
    --text-on-dark-accent: var(--teal-medium);
    --text-on-dark-muted: var(--Grey-300);
    --text-link-purple: #5B3FB8;
    --text-error: var(--error-dark);

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

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

    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 30px;
    --font-size-4xl: 36px;
    --font-size-5xl: 48px;
    --font-size-6xl: 60px;

    --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;
    --font-size-48: 48px;
    --font-size-60: 60px;

    /* Semantic typography roles (sitewide aliases) */
    --text-caption: var(--font-size-12);
    --text-body-sm: var(--font-size-14);
    --text-body: var(--font-size-15);
    --text-body-lg: var(--font-size-16);
    --text-title-sm: var(--font-size-18);
    --text-title: var(--font-size-22);
    --text-title-lg: var(--font-size-24);
    --text-display-sm: var(--font-size-24);
    --text-display: var(--font-size-36);
    --text-hero: var(--font-size-5xl);
    --text-jumbo: var(--font-size-6xl);

    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.75;
    --lh-tight: var(--line-height-tight);
    --lh-normal: var(--line-height-base);
    --lh-relaxed: var(--line-height-relaxed);

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

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

    /* Semantic spacing roles (sitewide aliases) */
    /* Component-level spacing (internal gaps, small paddings) */
    --space-component-xs: var(--space-1);   /* 4px - tight internal gaps */
    --space-component-sm: var(--space-2);   /* 8px - default component gaps */
    --space-component-md: var(--space-4);   /* 16px - component padding */
    --space-component-lg: var(--space-6);   /* 24px - large component padding */

    /* Layout-level spacing (between components, cards) */
    --space-layout-xs: var(--space-2);      /* 8px */
    --space-layout-sm: var(--space-8);      /* 32px - small section gaps */
    --space-layout-md: var(--space-12);     /* 48px - medium section gaps */
    --space-layout-lg: var(--space-16);     /* 64px - large section gaps */

    /* Page-level spacing (sections, containers) */
    --space-section-sm: var(--space-10);    /* 40px */
    --space-section-md: var(--space-12);    /* 48px */
    --space-section-lg: var(--space-20);    /* 80px - section padding */
    --space-section-xl: var(--space-24);    /* 96px */

    /* Container/page edge spacing */
    --space-page-gutter: var(--space-6);    /* 24px - default page gutters */
    --space-page-gutter-sm: var(--space-4); /* 16px - mobile gutters */
    --space-page-gutter-lg: var(--space-10); /* 40px - large containers */
    --space-page-gutter-xl: 120px;           /* 120px - max container padding */

    --container-width-sm: 640px;
    --container-width-md: 768px;
    --container-width-lg: 1024px;
    --container-width-xl: 1280px;
    --container-width-2xl: 1400px;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

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

    /* WCAG 1.4.11 non-text control contrast (3:1) */
    --control-border: var(--Grey-500);
    --control-border-focus: var(--Grey-700);
    --control-border-on-dark: var(--Grey-400);
    --control-focus-ring: 0 0 0 2px var(--Grey-700);

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

    /* ------------------------------------------------------------------
      Legacy token aliases (underscore naming)
      Many templates/CSS files still reference underscore vars like:
      `--purple_light`, `--pink_dark`, `--Grey_700`, etc.
      `base.html` pages load this file (not `css/style.css`), so we provide
      aliases to keep those pages styled correctly during migration.
    ------------------------------------------------------------------- */
    --white: var(--White);

    --pink_light: var(--pink-light);
    --pink_medium: var(--pink-medium);
    --pink_dark: var(--pink-dark);

    --teal_light: var(--teal-light);
    --teal_medium: var(--teal-medium);
    --teal_dark: var(--teal-dark);

    --purple_light: var(--purple-light);
    --purple_medium: var(--purple-medium);
    --purple_dark: var(--purple-dark);

    /* Legacy "purple black" token (used by calculator cards + other pages) */
    --purple_black: #7c65cf;
    --purple-black: var(--purple_black);

    --Grey_50: var(--Grey-50);
    --Grey_100: var(--Grey-100);
    --Grey_200: var(--Grey-200);
    --Grey_300: var(--Grey-300);
    --Grey_400: var(--Grey-400);
    --Grey_500: var(--Grey-500);
    --Grey_600: var(--Grey-600);
    --Grey_700: var(--Grey-700);
    --Grey_800: var(--Grey-800);
    --Grey_900: var(--Grey-900);

    /* Legacy tokens used by award-section and landing partials (were only in style.css) */
    --dark_grey: var(--Grey-700);
    --darkgrey: var(--Grey-700);
    --dark_grey_blue: #182232;
    --wrightskyblue: var(--purple-light);
    --light_grey_pink_shade: #706C70;
    --semi_grey: #575457;
    --semi_gray: var(--Grey-600);
    --navy_blue: var(--Grey-900);
    --gray_blue_shade: rgba(52, 64, 84, 0.4);
    --gray-blue-shade: var(--gray_blue_shade);
    --Grey_light_blue: var(--Grey-200);
    --Grey-light-blue: var(--Grey-300);
    --white-blue-shade: var(--Grey-50);
    --wrightblack: #1E0C1C;
    --light_gray: var(--Grey-400);
}