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

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

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

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

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

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