/**
 * Design System Tokens
 * Generated from Figma Semantic tokens
 * 
 * Breakpoints:
 * - Mobile Small: 360-509px
 * - Mobile Large: 510-719px  
 * - Tablet: 720-1024px
 * - Desktop Small: 1025-1439px
 * - Desktop Large: 1440-1919px
 * - Desktop XL: 1920px+
 *
 * Typography (headers / body / specialty):
 * - Headers H1–H4: desktop sizes from 720px up; below 720px use reduced mobile sizes (H1 72→48, H2 56→40, H4 32→24, H6 24→18).
 * - Body 400–700: desktop sizes from 720px up; below 720px use reduced sizes; line-heights 26/32/36 scale to 22/26/32 on mobile.
 * - Font weight: Medium→Regular and Bold→Ultrabold below 1025px (see --responsive-font-weight-*).
 * - Quote: 32px / 44px lh from 1025px up; 24px below; quote lh 32 (<510), 36 (≥510), 44 (≥1025).
 * - Eyebrow: Surt Normal Regular, 16% letter-spacing, uppercase; 16px (≥720) / 14px (<720); Label 12px (≥720) / 14px; Display 32px (≥720) / 24px; Number 132px (≥720) / 112px.
 *
 * Color architecture (align with design system):
 * - **Primitives** (`--color-brand-*`, neutrals, scales): brand palette only. Changing a primitive updates
 *   every semantic token and component that references it. Do not swap primitives for one-off component needs.
 * - **Semantic** (`--typography-*`, `--surface-*`, `--button-*`, `--graphics-accent-*`, `--tag-*`, etc.):
 *   map roles (body text, surface, hover, icons) to primitives or neutrals. Prefer these in blocks/CSS so
 *   component-specific tweaks can be done by adjusting semantics or adding a new semantic alias, without
 *   forking the brand scale.
 */

 :root {
    /* ========================================
       PRIMITIVE COLORS (Base values)
       Brand palette — source: Figma brand weights 100–900. Semantic tokens below reference these.
       ======================================== */
    
    /* Neutrals */
    --color-white: #FFF;
    --color-black: #000;
    --color-grey-50: #F1F1F1;
    --color-grey-100: #F5F5F5;
    --color-grey-200: #E5E5E5;
    --color-grey-300: #D4D4D4;
    --color-grey-400: #A3A3A3;
    --color-grey-500: #737373;
    --color-grey-600: #666;
    --color-grey-700: #404040;
    --color-grey-800: #262626;
    --color-grey-900: #171717;
    --color-grey-950: #0A0A0A;
    --color-grey-disabled: #E6E6E6;
    --color-grey-subtle: #BFBFBF;
    --color-grey-light: #767676;
    
    /* Brand Colors Premetive */
    --color-brand-100: #F0F0E7;
    --color-brand-200: #172443;
    --color-brand-300: #1C76D3;
    --color-brand-400: #B8D6DF;
    --color-brand-600: #FFC6AE;
    --color-brand-700: #FF9060;
    --color-brand-800: #46022E;
    --color-brand-900: #101625;

    /* SOME unique Colours which are not part of the brand palette but are used in the project */
    --color-semantic-1: #17252e; /* range-bubble */
    --color-semantic-2: #494f50; /* range-track */
    --color-semantic-3: #969696; /* tnc-text */
    --color-semantic-4: #b0b0b0;
    --color-semantic-5: #333;
    
    /* Accent Colors - 200 Series */
    --color-200-225: #BBBEC6;
    --color-200-250: #848A9A;
    --color-200-275: #4D576E;
    
    /* Blue Scale */
    --color-blue-50: #EFF6FF;
    --color-blue-100: #DBEAFE;
    --color-blue-200: #BFDBFE;
    --color-blue-300: #93C5FD;
    --color-blue-400: #60A5FA;
    --color-blue-500: #3B82F6;
    --color-blue-600: #2563EB;
    --color-blue-700: #1D4ED8;
    --color-blue-800: #1E40AF;
    --color-blue-900: #1E3A8A;
    --color-blue-950: #172554;
    --color-blue-primary: #256EC6;
    --color-blue-dark: #00358E;
    --color-blue-light: #F4F8FD;
    
    /* Red Scale */
    --color-red-50: #FEF2F2;
    --color-red-100: #FFE2E2;
    --color-red-200: #FECACA;
    --color-red-300: #FCA5A5;
    --color-red-400: #F87171;
    --color-red-500: #EF4444;
    --color-red-600: #DC2626;
    --color-red-700: #B91C1C;
    --color-red-800: #991B1B;
    --color-red-900: #7F1D1D;
    --color-red-950: #450A0A;
    
    /* Orange Scale */
    --color-orange-50: #FFF7ED;
    --color-orange-100: #FFEDD5;
    --color-orange-200: #FED7AA;
    --color-orange-300: #FDBA74;
    --color-orange-400: #FB923C;
    --color-orange-500: #F97316;
    --color-orange-600: #EA580C;
    --color-orange-700: #C2410C;
    --color-orange-800: #9A3412;
    --color-orange-900: #7C2D12;
    --color-orange-950: #431407;
    
    /* Yellow Scale */
    --color-yellow-50: #FEFCE8;
    --color-yellow-100: #FEF9C3;
    --color-yellow-200: #FEF08A;
    --color-yellow-300: #FDE047;
    --color-yellow-400: #FACC15;
    --color-yellow-500: #EAB308;
    --color-yellow-600: #CA8A04;
    --color-yellow-700: #A16207;
    --color-yellow-800: #854D0E;
    --color-yellow-900: #713F12;
    --color-yellow-950: #422006;
    
    /* Green Scale */
    --color-green-50: #F0FDF4;
    --color-green-100: #DCFCE7;
    --color-green-200: #BBF7D0;
    --color-green-300: #86EFAC;
    --color-green-400: #4ADE80;
    --color-green-500: #22C55E;
    --color-green-600: #16A34A;
    --color-green-700: #15803D;
    --color-green-800: #166534;
    --color-green-900: #14532D;
    --color-green-950: #052E16;
    
    /* Violet Scale */
    --color-violet-50: #F5F3FF;
    --color-violet-100: #EDE9FE;
    --color-violet-200: #DDD6FE;
    --color-violet-300: #C4B5FD;
    --color-violet-400: #A78BFA;
    --color-violet-500: #8B5CF6;
    --color-violet-600: #7C3AED;
    --color-violet-700: #6D28D9;
    --color-violet-800: #5B21B6;
    --color-violet-900: #4C1D95;
    --color-violet-950: #2E1065;
    
    /* Pink Scale */
    --color-pink-50: #FDF2F8;
    --color-pink-100: #FCE7F3;
    --color-pink-200: #FBCFE8;
    --color-pink-300: #F9A8D4;
    --color-pink-400: #F472B6;
    --color-pink-500: #EC4899;
    --color-pink-600: #DB2777;
    --color-pink-700: #BE185D;
    --color-pink-800: #9D174D;
    --color-pink-900: #831843;
    --color-pink-950: #500724;
    
    /* Status Colors */
    --color-danger: #D40019;
    --color-danger-dark: #A60018;
    --color-success: var(--color-green-500);
    --color-warning: var(--color-yellow-500);
    --color-info: var(--color-blue-500);
    
    /* Special */
    --color-inactive: #848A9A;
    --color-tag-fill: #4A6066;
    --color-footer: #101625;
    --color-gradient-primary: var(--color-white);
    --color-quiet-light: var(--color-brand-100);
    --background-news-strip: #FFDF61;
  
    /* ========================================
       TYPOGRAPHY - FONT FAMILY
       ======================================== */
    --font-family-primary: 'Surt Normal', sans-serif;
    --font-family-accent: 'NB Akademie Mono Std', monospace;
    --font-family-serif: 'Surt Normal', sans-serif;
    --font-family-system-mac: 'SF Pro Text', system-ui;
    --font-family-system-pc: 'Segoe UI', system-ui;
    --font-family-system-ios: 'SF Pro', system-ui;

    /* Roboto removed from /fonts — keep system token aligned with our primary font */
    --font-family-system-android: 'Surt Normal', sans-serif;
    --font-family-code: 'Mono', monospace;
  
    /* ========================================
       TYPOGRAPHY - FONT WEIGHT
       ======================================== */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-ultrabold: 800;
    --font-weight-black: 900;

    /* Medium→Regular, Bold→Ultrabold below 1025px; inverted at 1025px+ (see media queries) */
    --responsive-font-weight-body: var(--font-weight-regular);
    --responsive-font-weight-bold: var(--font-weight-ultrabold);
  
    /* ========================================
       TYPOGRAPHY - FONT SIZE SCALE
       ======================================== */
    --font-size-45: 9px;
    --font-size-50: 10px;
    --font-size-75: 11px;
    --font-size-100: 12px;
    --font-size-200: 14px;
    --font-size-300: 16px;
    --font-size-400: 16px;
    --font-size-500: 18px;
    --font-size-600: 20px;
    --font-size-700: 24px;
    --font-size-800: 32px;
    --font-size-900: 40px;
    --font-size-1000: 48px;
    --font-size-1100: 56px;
    --font-size-1200: 72px;
    --font-size-1250: 112px;
    --font-size-1300: 132px;
  
    /* Semantic Font Size Aliases */
    --body-font-size-xs: var(--font-size-100);
    --body-font-size-s: var(--font-size-200);
    --body-font-size-m: var(--font-size-300);
    --body-font-size-l: var(--font-size-500);
    --body-font-size-xl: var(--font-size-600);
    
    /* UI Library typography maps "Header 500" to 18px */
    --heading-font-size-xs: var(--font-size-500);
    --heading-font-size-s: var(--font-size-700);
    --heading-font-size-m: var(--font-size-800);
    --heading-font-size-l: var(--font-size-900);
    --heading-font-size-xl: var(--font-size-1000);
    --heading-font-size-xxl: var(--font-size-1100);
    --heading-font-size-display: var(--font-size-1200);
    --heading-font-size-hero: var(--font-size-1300);

    /* ========================================
       TYPOGRAPHY - LINE HEIGHT & LETTER SPACING (UI Library)
       Source: UI Library Typography node (24959:259)
       ======================================== */
    --line-height-14: 14px;
    --line-height-16: 16px;
    --line-height-22: 22px;
    --line-height-26: 26px;
    --line-height-30: 30px;
    --line-height-32: 32px;
    --line-height-36: 36px;
    --line-height-44: 44px;
    --line-height-53: 53px;
    --line-height-64: 64px;

    /* Percent-based line-heights from Figma tables (use as unitless multipliers) */
    --line-height-100p: 1;
    --line-height-103p: 1.03;
    --line-height-104p: 1.04;
    --line-height-120p: 1.2;
    --line-height-130p: 1.3;
    --line-height-140p: 1.4;
    --line-height-150p: 1.5;
    --line-height-160p: 1.6;

    /* Named UI Library styles (optional helpers) */
    --type-body-600-size: var(--font-size-600); /* 20 */
    --type-body-600-line-height: var(--line-height-32);
    --type-body-600-weight: var(--responsive-font-weight-body);
    --type-body-500-size: var(--font-size-500); /* 18 */
    --type-body-500-line-height: var(--line-height-26);
    --type-body-500-weight: var(--responsive-font-weight-body);
    --type-body-400-size: var(--font-size-300); /* 16 */
    --type-body-400-line-height: var(--line-height-26);
    --type-body-400-weight: var(--font-weight-regular);
    --type-body-200-size: var(--font-size-200); /* 14 */
    --type-body-200-line-height: var(--line-height-150p);
    --type-body-200-weight: var(--font-weight-regular);
    --type-body-100-size: var(--font-size-100); /* 12px */
    --type-body-100-line-height: var(--line-height-22);
    --type-body-100-weight: var(--font-weight-regular);

    /* Eyebrow — Section Title: Surt Normal Regular; 16px / 26px lh @≥720; 14px / 22px <720; 16% tracking; uppercase */
    --type-eyebrow-font-family: var(--font-family-primary);
    --type-eyebrow-weight: var(--font-weight-regular);
    --type-eyebrow-letter-spacing: 0.16em;
    --type-eyebrow-text-transform: uppercase;
    --type-eyebrow-size: var(--font-size-200);
    --type-eyebrow-line-height: var(--line-height-22);

    /* Header element styles */
    --responsive-header1-size: var(--font-size-1000);
    --responsive-header1-line-height: var(--line-height-104p);
    --responsive-header1-weight: var(--font-weight-bold);
    --responsive-header2-size: var(--font-size-700);
    --responsive-header2-line-height: var(--line-height-130p);
    --responsive-header2-weight: var(--font-weight-semibold);
    --responsive-header4-size: var(--font-size-900);
    --responsive-header4-line-height: var(--line-height-120p);
    --responsive-header4-weight: var(--font-weight-bold);
    --responsive-header5-size: var(--font-size-500);
    --responsive-header5-line-height: var(--line-height-140p);
    --responsive-header5-weight: var(--font-weight-semibold);

    /* Header 6 — 24px (≥720) / 18px (mobile) */
    --responsive-header6-size: var(--font-size-500);
    --responsive-header6-line-height: var(--line-height-130p);
    --responsive-header6-weight: var(--font-weight-semibold);

    /* ---- Body 700 ---- */

    /* Medium — responsive (most used) */
    --responsive-body-700-size: var(--font-size-600);          /* 20px mobile */
    --responsive-body-700-line-height: var(--line-height-32);  /* 32px mobile */
    --responsive-body-700-weight: var(--responsive-font-weight-body);

    /* Semibold — fixed across all breakpoints */
    --fixed-body-700-size: var(--font-size-700);               /* 24px */
    --fixed-body-700-line-height: var(--line-height-130p);     /* 130% */
    --fixed-body-700-weight: var(--font-weight-semibold);      /* 600 */

    /* ---- Body 600 ---- */

    /* Medium — responsive */
    --responsive-body-600-size: var(--font-size-400);          /* 16px mobile */
    --responsive-body-600-line-height: var(--line-height-26);  /* 26px mobile */
    --responsive-body-600-weight: var(--responsive-font-weight-body);

    /* Bold — mobile base (steps up at 720px) */
    --fixed-body-600-bold-size: var(--font-size-400);          /* 16px mobile */
    --fixed-body-600-bold-line-height: var(--line-height-26);  /* 26px mobile */
    --fixed-body-600-bold-weight: var(--responsive-font-weight-bold);

    /* ---- Body 500 ---- */

    /* Medium — responsive */
    --responsive-body-500-size: var(--font-size-300);          /* 16px mobile */
    --responsive-body-500-line-height: var(--line-height-22);  /* 22px mobile */
    --responsive-body-500-weight: var(--responsive-font-weight-body);

    /* ---- Body 400 ---- */

    /* Regular — responsive */
    --responsive-body-400-size: var(--font-size-200);          /* 14px mobile */
    --responsive-body-400-line-height: var(--line-height-22);  /* 22px mobile */
    --responsive-body-400-weight: var(--font-weight-regular);  /* 400 */

    /* Bold — responsive (mobile base) */
    --body-400-bold-size: var(--font-size-200);                /* 14px mobile */
    --body-400-bold-line-height: var(--line-height-22);        /* 22px mobile */
    --body-400-bold-weight: var(--responsive-font-weight-bold);

    /* ---- Body 200 — 3 variants ---- */

    /* Surt Regular — fixed 360-1920 */
    --responsive-body-200-size: var(--font-size-200);          /* 14px */
    --responsive-body-200-line-height: var(--line-height-22);  /* 22px */
    --responsive-body-200-weight: var(--font-weight-regular);  /* 400 */
    --responsive-body-200-font-family: var(--font-family-primary); /* Surt Normal */

    /* Bold — fixed 360-1920 */
    --fixed-body-200-bold-size: var(--font-size-200);          /* 14px */
    --fixed-body-200-bold-line-height: var(--line-height-22);  /* 22px */
    --fixed-body-200-bold-weight: var(--responsive-font-weight-bold);

    /* Mono Std — fixed 360-1920 (NB Akademie Mono Std) */
    --fixed-body-200-mono-size: var(--font-size-200);          /* 14px */
    --fixed-body-200-mono-line-height: var(--line-height-22);  /* 22px */
    --fixed-body-200-mono-weight: var(--font-weight-regular);  /* 400 */
    --fixed-body-200-mono-font-family: var(--font-family-accent); /* NB Akademie Mono Std */

    /* ---- Body 100 — 2 variants ---- */

    /* Surt Regular — fixed 360-1920 */
    --responsive-body-100-size: var(--font-size-100);          /* 12px */
    --responsive-body-100-line-height: var(--line-height-150p);/* 150% */
    --responsive-body-100-weight: var(--font-weight-regular);  /* 400 */
    --responsive-body-100-font-family: var(--font-family-primary); /* Surt Normal */

    /* Mono Std — fixed 360-1920 (NB Akademie Mono Std, different LH!) */
    --fixed-body-100-mono-size: var(--font-size-100);          /* 12px */
    --fixed-body-100-mono-line-height: var(--line-height-104p);/* 104% */
    --fixed-body-100-mono-weight: var(--font-weight-regular);  /* 400 */
    --fixed-body-100-mono-font-family: var(--font-family-accent); /* NB Akademie Mono Std */

    /* ---- Body 50 / 45 ---- */
    --responsive-body-50-size: var(--font-size-50);            /* 10px */
    --responsive-body-50-line-height: var(--line-height-14);   /* 14px */
    --responsive-body-50-weight: var(--font-weight-medium);    /* 500 */
    --responsive-body-45-size: var(--font-size-45);            /* 9px */
    --responsive-body-45-line-height: var(--line-height-14);   /* 14px */
    --responsive-body-45-weight: var(--font-weight-regular);   /* 400 */
  
    /* ========================================
       TYPOGRAPHY - TEXT TRANSFORM
       ======================================== */
    --text-transform-none: none;
    --text-transform-uppercase: uppercase;
    --text-transform-lowercase: lowercase;
    --text-transform-capitalize: capitalize;
  
    /* ========================================
       TYPOGRAPHY - TEXT DECORATION
       ======================================== */
    --text-decoration-none: none;
    --text-decoration-underline: underline;
    --text-decoration-strikethrough: line-through;
  
    /* ========================================
       TYPOGRAPHY COLORS (semantic — use for text roles, not raw brand primitives in components)
       ======================================== */
    --typography-black: var(--color-black);
    --typography-main: var(--color-brand-200);
    --typography-accent-1: var(--color-brand-300);
    --typography-accent-2: var(--color-brand-400);
    --typography-secondary: var(--color-grey-700);
    --typography-tertiary: var(--color-grey-300);
    --typography-inverse: var(--color-white);
    --typography-disabled: var(--color-grey-400);
    --typography-inactive: var(--color-inactive);
    --typography-light-secondary: var(--color-grey-light);
  
    /* ========================================
       BUTTON TOKENS (semantic — interactive affordances)
       ======================================== */
    
    /* Primary Button */
    --button-primary-default: var(--color-brand-300);
    --button-primary-text: var(--typography-inverse);
    
    /* Secondary Button */
    --button-secondary-bg-default: transparent;
    --button-secondary-bg-hover: var(--color-blue-dark);
    --button-secondary-stroke-default: var(--color-black);
    --button-secondary-stroke-hover: var(--color-brand-300);
    --button-secondary-text-default: var(--typography-black);
    --button-secondary-text-hover: var(--typography-inverse);
    
    /* Inverse Button */
    --button-inverse-default: var(--color-white);
    
    /* Alternative Button Colors */
    --button-alt-primary: var(--color-blue-primary);
    --button-alt-primary-hover: var(--color-blue-dark);
    --button-alt-primary-focus: var(--color-blue-dark);
    --button-alt-primary-disabled: var(--color-grey-disabled);
    --button-alt-secondary: var(--color-white);
    --button-alt-secondary-hover: var(--color-blue-light);
    --button-alt-secondary-focus: var(--color-blue-light);
    --button-alt-secondary-disabled: var(--color-grey-disabled);
    --button-alt-danger: var(--color-danger);
    --button-alt-danger-hover: var(--color-danger-dark);
    --button-alt-danger-focus: var(--color-danger-dark);
    --button-alt-danger-disabled: var(--color-grey-disabled);
  
    /* ========================================
       ICON COLORS & SIZES
       ======================================== */
    --color-icon-light: var(--color-white);
    --color-icon-light-accent: var(--color-brand-400);
    --color-icon-primary: var(--color-brand-200);
    --icon-active: var(--color-brand-300);
  
    /* Icon Sizes */
    --icon-size-xsm: 16px;
    --icon-size-sm: 20px;
    --icon-size-md: 24px;
    --icon-size-lg: 32px;
    --icon-size-xlg: 40px;
  
    /* ========================================
       DATA GRID
       ======================================== */
    --data-grid-background: var(--color-grey-100);
  
    /* ========================================
       DIVIDER COLORS
       ======================================== */
    --divider-light: var(--color-grey-200);
    --divider-grey: var(--color-grey-400);
    --divider-border-accent: var(--color-brand-300);
    --divider-border-light: var(--color-brand-400);
  
    /* ========================================
       SURFACE / SECTION BACKGROUNDS (semantic — page & region fills; override here for one-off sections)
       ======================================== */
    --surface-white: var(--color-white);
    --surface-light-grey: var(--color-grey-100);
    --surface-medium-grey: var(--color-grey-400);
    --surface-dark: var(--color-brand-200);
    --surface-footer: var(--color-footer);
    --surface-page-neutral: var(--color-grey-50);
    --surface-page-accent-1: var(--color-brand-400);
    --surface-page-accent-2: #E8F1FD;
  
    /* Scroll Indicator */
    --color-scroll-active: var(--color-black);
    --color-scroll-inactive: #797979;
  
    /* ========================================
       GRAPHICS / ACCENT COLORS (semantic — illustrations, charts; maps to brand weights)
       ======================================== */
    --graphics-accent-1: var(--color-brand-400);
    --graphics-accent-2: var(--color-brand-200);
    --graphics-accent-3: var(--color-brand-600);
    --graphics-accent-4: var(--color-brand-300);
    --graphics-accent-5: var(--color-brand-700);
    --graphics-accent-6: var(--color-brand-100);
  
    /* ========================================
       TAG COLORS
       ======================================== */
    --tag-text-fill: var(--color-tag-fill);
    --tag-text-outline: var(--color-brand-200);
    --tag-text-glass: var(--color-white);
    --tag-border-outline: var(--color-brand-200);
    --tag-border-glass: rgb(255 255 255 / 40%);
    --tag-bg-fill: var(--color-brand-200);
    --tag-bg-glass: rgb(255 255 255 / 20%);
  
    /* ========================================
       BORDER COLORS
       ======================================== */
    --border-strong: var(--color-grey-500);
    --border-subtle: var(--color-grey-subtle);
    --border-inverse: var(--color-white);
    --border-interactive: var(--color-blue-primary);
    --border-hover: var(--color-blue-dark);
    --border-focus: var(--color-black);
    --border-focus-inverse: var(--color-white);
    --border-disabled: var(--color-grey-subtle);
    --border-error: var(--color-danger-dark);
  
    /* ========================================
       BORDER WIDTH
       ======================================== */
    --border-width-0: 0;
    --border-width-100: 1px;
    --border-width-200: 2px;
    --border-width-300: 4px;
  
    /* ========================================
       BORDER RADIUS
       ======================================== */
    --radius-0: 0;
    --radius-2: 2px;
    --radius-4: 4px;
    --radius-8: 8px;
    --radius-12: 12px;
    --radius-16: 16px;
    --radius-pill: 1000px;
    --radius-circle: 50%;
    
    /* Semantic Radius Aliases */
    --radius-xs: var(--radius-4);
    --radius-sm: var(--radius-12);
    --radius-md: var(--radius-16);
    --radius-lg: 32px;
  
    /* ========================================
       SIZE SCALE (Primitive)
       ======================================== */
    --size-0: 0;
    --size-1: 1px;
    --size-2: 2px;
    --size-4: 4px;
    --size-6: 6px;
    --size-8: 8px;
    --size-12: 12px;
    --size-16: 16px;
    --size-20: 20px;
    --size-29: 29px;
    --size-24: 24px;
    --size-28: 28px;
    --size-32: 32px;
    --size-40: 40px;
    --size-48: 48px;
    --size-52: 52px;
    --size-56: 56px;
    --size-60: 60px;
    --size-64: 64px;
    --size-72: 72px;
    --size-80: 80px;
    --size-88: 88px;
    --size-96: 96px;
    --size-104: 104px;
    --size-117: 117px;
    --size-124: 124px;
    --size-135: 135px;
    --size-144: 144px;
    --size-147: 147px;
    --size-157: 157px;
    --size-181: 181px;
    --size-235: 235px;
  
    /* ========================================
       SPACING SCALE (Semantic)
       ======================================== */
    --spacing-0: 0;
    --spacing-100: var(--size-4);
    --spacing-200: var(--size-8);
    --spacing-300: var(--size-12);
    --spacing-400: var(--size-16);
    --spacing-500: var(--size-20);
    --spacing-600: var(--size-24);
    --spacing-650: var(--size-28);
    --spacing-700: var(--size-32);
    --spacing-800: var(--size-40);
    --spacing-900: var(--size-48);
    --spacing-950: var(--size-56);
    --spacing-1000: var(--size-64);
    --spacing-1100: var(--size-80);
    --spacing-1150: var(--size-88);
    --spacing-1200: var(--size-96);
    --spacing-1300: var(--size-124);
  
    /* ========================================
       BREAKPOINTS
       ======================================== */

    /* Updated standard breakpoints: Only use necessary and common device sizes */
    --breakpoint-mobile: 360px;    /* iPhone X, common mobile */
    --breakpoint-tablet: 720px;    /* iPad, common tablet */
    --breakpoint-desktop: 1025px;  /* Desktop breakpoint */
    --breakpoint-desktop-xl: 1920px;  /* Desktop XL breakpoint could use for max-width calculations but Rarely used */

    /* Note: Avoid excessive breakpoints. Use these standard ones for simplicity. */
  
    /* ========================================
       GRID
       ======================================== */
    --grid-column-4: var(--size-4);
    --grid-column-8: var(--size-8);
    --grid-column-12: var(--size-12);
    --grid-gutter-100: var(--size-16);
    --grid-gutter-200: var(--size-8);
    --grid-gutter-300: var(--size-12);
  
    /* ========================================
       MARGINS (Responsive)
       ======================================== */
    --margin-mobile: var(--size-16);
    --margin-tablet: var(--size-24);
    --margin-desktop: var(--size-32);
    --margin-desktop-xl: var(--size-40);
  
    /* ========================================
       ELEVATION / SHADOW
       ======================================== */
    --shadow-100-color: rgb(0 0 0 / 5%);
    --shadow-100-x: 0;
    --shadow-100-y: 1px;
    --shadow-100-blur: 0;
    --shadow-100-spread: 0;
    --shadow-100: var(--shadow-100-x) var(--shadow-100-y) var(--shadow-100-blur) var(--shadow-100-spread) var(--shadow-100-color);
  
    /* ========================================
       OPACITY
       ======================================== */
    --opacity-0: 0;
    --opacity-25: 0.25;
    --opacity-50: 0.5;
    --opacity-75: 0.75;
    --opacity-90: 0.9;
    --opacity-100: 1;
  
    /* ========================================
       RESPONSIVE VALUES
       Mobile (default) - xs breakpoint
       ======================================== */
    --type-header-1100-responsive-size: var(--font-size-900);
    --type-header-700-responsive-size: var(--font-size-500);
    --responsive-width: 360px;
    --responsive-container: 320px;
    --responsive-content-box: 280px;

    /* Hero section padding */
    --responsive-spacing-hero: var(--spacing-400); /* 16px */

    /* ========================================
       SECTION SPACING UTILS (Responsive)
       Used by `main > .section.section-spacing` in styles.css
       ======================================== */

    /* Space Between sections */
    --responsive-spacing-between-section: var(--spacing-500); /* 20px */

    /* Right / Left padding */
    --responsive-spacing-horizontal: var(--spacing-500); /* 20px */

    /* Padding top and bottom inside the section */
    --responsive-spacing-vertical: var(--spacing-700);

    /* ========================================
       Body Font Size (Responsive)
       Used by any default content
       ======================================== */

       --responsive-font-body-700: var(--font-size-600); /* 20px */
       --responsive-font-body-600: var(--font-size-400); /* 16px */
       --responsive-font-body-500: var(--font-size-300); /* 16px */
       --responsive-font-body-400: var(--font-size-200); /* 14px */
       --responsive-line-height-body-800: var(--line-height-26);
       --responsive-line-height-26: var(--line-height-22); /* 22px */
       --responsive-line-height-32: var(--line-height-26); /* 26px */
       --responsive-line-height-36: var(--line-height-32); /* 32px */
       --responsive-line-height-44: var(--line-height-32); /* 32px */

    /* ========================================
       Quote font Size (Responsive)
       Used by any default content
       ======================================== */
       --responsive-font-quote: var(--font-size-700); /* 24px */
       --responsive-line-height-quote: var(--line-height-32); /* 32px */

    /* ========================================
       Specialty Font Sizes (Responsive)
       ======================================== */
       --responsive-font-label: var(--font-size-200);   /* 14px */
       --responsive-display-size: var(--font-size-700); /* 24px */
       --responsive-display-weight: var(--font-weight-semibold); /* 600 */
       --responsive-display-line-height: var(--line-height-32); /* 32px */
       --responsive-number-size: var(--font-size-1250); /* 112px */
       --responsive-number-weight: var(--font-weight-semibold); /* 600 */
       --responsive-number-line-height: var(--line-height-100p); /* 1.0 — tight display numerals */

    /* ========================================
       MAIN LAYOUT (Responsive)
       Used by `main > div` in styles.css
       ======================================== */

    /* Keep main layout in sync with responsive left/right padding */
    --main-side-margin-x: var(--spacing-500);
    --main-max-width: none;
  
    /* ========================================
       SEMANTIC ALIASES
       ======================================== */
    
    /* Text Colors */
    --text-color: var(--typography-main);
    --text-color-secondary: var(--typography-secondary);
    --text-color-muted: var(--typography-disabled);
    --text-color-inverse: var(--typography-inverse);
    --text-color-link: var(--typography-accent-1);
    --text-color-light-secondary: var(--typography-light-secondary);
    
    /* Background Colors */
    --background-color: var(--surface-white);
    --background-color-alt: var(--surface-light-grey);
    --background-color-dark: var(--surface-dark);
    --background-color-accent: var(--color-brand-400);
    --background-color-quiet-light: var(--color-quiet-light);
    
    /* Link Colors */
    --link-color: var(--color-brand-300);
    --link-hover-color: var(--color-brand-200);
    
    /* Border */
    --border-color: var(--divider-light);
    --border-color-strong: var(--border-strong);
    
    /* Heading Colors */
    --heading-color: var(--typography-main);
    --heading-background-color: var(--surface-light-grey);
  }
  
  /* ========================================
     RESPONSIVE BREAKPOINTS
     ======================================== */
  
  /* Mobile Large: 510-719px */
  @media (width >= 510px) {
    :root {
      --responsive-width: 510px;
      --responsive-container: 470px;
      --responsive-content-box: 470px;

      /* Space Between sections */
      --responsive-spacing-between-section: var(--spacing-500); /* 20px */

      /* Header 900 font size */
      --type-header-900-size: var(--font-size-800); /* 32px */

      /* Quote font: 24px (same as base, but line-height steps up to 36px) */
      --responsive-font-quote: var(--font-size-700); /* 24px */
      --responsive-line-height-quote: var(--line-height-36); /* 36px */
    }
  }
  
  /* Tablet: 720-1024px */
  @media (width >= 720px) {
    :root {
      --responsive-width: 720px;
      --responsive-container: 672px;
      --responsive-content-box: 672px;

      /* Keep main layout in sync with responsive left/right padding */
      --main-side-margin-x: var(--spacing-600); /* 24px */

      /* Right / Left padding */
      --responsive-spacing-horizontal: var(--spacing-600); /* 24px */

      /* Padding top and bottom inside the section */
      --responsive-spacing-vertical: var(--spacing-700); /* 32px */

      /* Space Between sections */
      --responsive-spacing-between-section: var(--spacing-600); /* 24px */

      /* Hero section padding */
      --responsive-spacing-hero: var(--spacing-600); /* 24px */
      --type-header-1100-responsive-size: var(--font-size-1100);
      --type-header-700-responsive-size: var(--font-size-700);

      /* Body font sizes: step up to desktop scale */
      --responsive-font-body-700: var(--font-size-700); /* 24px */
      --responsive-font-body-600: var(--font-size-600); /* 20px */
      --responsive-font-body-500: var(--font-size-500); /* 18px */
      --responsive-font-body-400: var(--font-size-400); /* 16px */

      /* Named body element styles: desktop overrides (responsive variants) */
      --responsive-body-700-size: var(--font-size-700);          /* 24px */
      --responsive-body-700-line-height: var(--line-height-36);  /* 36px */
      --responsive-body-600-size: var(--font-size-600);          /* 20px */
      --responsive-body-600-line-height: var(--line-height-32);  /* 32px */
      --responsive-body-500-size: var(--font-size-500);          /* 18px */
      --responsive-body-500-line-height: var(--line-height-26);  /* 26px */
      --responsive-body-400-size: var(--font-size-400);          /* 16px */
      --responsive-body-400-line-height: var(--line-height-26);  /* 26px */

      /* Body 600 Bold — desktop override */
      --fixed-body-600-bold-size: var(--font-size-600);          /* 20px */
      --fixed-body-600-bold-line-height: var(--line-height-160p);/* 160% */

      /* Body 400 Bold — desktop override (steps up from 14px mobile) */
      --body-400-bold-size: var(--font-size-400);                /* 16px */
      --body-400-bold-line-height: var(--line-height-26);        /* 26px */
      --responsive-line-height-body-800: var(--line-height-32);
      --responsive-line-height-26: var(--line-height-26); /* 26px */
      --responsive-line-height-32: var(--line-height-32); /* 32px */
      --responsive-line-height-36: var(--line-height-36); /* 36px */
      --responsive-line-height-44: var(--line-height-36); /* 36px at 720-1024 */

      /* Specialty fonts: desktop scale */
      --responsive-font-label: var(--font-size-100);   /* 12px */
      --responsive-display-size: var(--font-size-800); /* 32px */
      --responsive-display-line-height: var(--line-height-44); /* 44px */
      --responsive-number-size: var(--font-size-1300); /* 132px */

      /* Header 1100 font size */
      --type-header-1100-size: var(--font-size-1100); /* 56px */

      /* Eyebrow: 16px / 26px lh (Section Title spec) */
      --type-eyebrow-size: var(--font-size-300);
      --type-eyebrow-line-height: var(--line-height-26);

      /* Header 900 font size */
      --type-header-900-size: var(--font-size-900); /* 40px */

      /* Header element responsive styles */
      --responsive-header1-size: var(--font-size-1200);
      --responsive-header2-size: var(--font-size-800);
      --responsive-header4-size: var(--font-size-1100);
      --responsive-header5-size: var(--font-size-700);
      --responsive-header6-size: var(--font-size-700);

      /* Header 700 font size */
      --type-header-700-size: var(--font-size-700); /* 24px */
    }
  }
  
  /* Desktop Small: 1025-1439px */
  @media (width >= 1025px) {
    :root {
      --responsive-width: 1025px;
      --responsive-container: 977px;
      --responsive-content-box: 977px;

      /* Font weights step up at 1025+: Regular→Medium, Ultrabold→Bold */
      --responsive-font-weight-body: var(--font-weight-medium); /* 500 */
      --responsive-font-weight-bold: var(--font-weight-bold);   /* 700 */

      /* Line height 44 steps up to 44px at 1025+ */
      --responsive-line-height-44: var(--line-height-44); /* 44px */

      /* Quote font */
      
      --responsive-font-quote: var(--font-size-800); /* 32px */
      --responsive-line-height-quote: var(--line-height-44); /* 44px */
    }
  }
  
  /* Desktop Large: 1440-1919px */
  @media (width >= 1440px) {
    :root {
      --responsive-width: 1440px;
      --responsive-container: 1392px;
      --responsive-content-box: 1158px;
      --main-max-width: 1392px;
      --responsive-spacing-hero: var(--spacing-800);

      /* Padding left and right inside the section */
      --responsive-spacing-horizontal: var(--size-117);

       /* Padding top and bottom inside the section */
      --responsive-spacing-vertical: var(--spacing-950);

      /* Space Between sections */
      --responsive-spacing-between-section: var(--spacing-700); /* 32px */
    }
  }
  
  /* Desktop XL: 1920px+ */
  @media (width >= 1920px) {
    :root {
      --responsive-width: 1920px;
      --responsive-container: 1600px;
      --responsive-content-box: 1330px;
      --main-max-width: 1600px;
      --responsive-spacing-hero: var(--spacing-800);

       /* Padding left and right inside the section */
       --responsive-spacing-horizontal: var(--size-135);

      /* Keep main layout in sync with responsive left/right padding */
      --main-side-margin-x: var(--spacing-0);
    }
  }