:root {
  /* =========================================
     Brand Colors — 2026 Brand Guidelines
     Midnight Blue / White / Black only.
     Surface tints are derived from Midnight Blue.
     ========================================= */
  --color-midnight: #182337;        /* Primary brand color */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* Midnight-derived surfaces (same hue, shifted lightness) */
  --color-midnight-deep: #101826;   /* Darkest page background */
  --color-midnight-raised: #22314A; /* Raised cards / secondary dark surface */
  --color-midnight-high: #2B3C5C;   /* Hover / highest dark surface */

  /* Semantic (functional UI only — never decorative) */
  --color-success: #4CAF50;
  --color-warning: #FF9800;
  --color-error: #F44336;
  --color-info: #88A0C8;

  /* Surface - Light */
  --surface-white: #FFFFFF;
  --surface-light-1: #F4F6F9;
  --surface-light-2: #E8ECF2;

  /* Text - Light mode */
  --text-primary: #182337;
  --text-secondary: #4E5A6E;
  --text-tertiary: #8A94A6;
  --text-disabled: #B8C0CC;

  /* Text - Dark mode (on midnight backgrounds) */
  --text-on-dark-primary: #FFFFFF;
  --text-on-dark-secondary: #A9B4C6;
  --text-on-dark-tertiary: #7D889C;
  --text-on-dark-disabled: #55607A;

  /* Borders / hairlines */
  --border-on-dark: rgba(255, 255, 255, 0.10);
  --border-on-dark-subtle: rgba(255, 255, 255, 0.06);
  --border-on-light: rgba(24, 35, 55, 0.12);

  /* Typography — Urbanist per brand guidelines */
  --font-sans: 'Urbanist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Roboto Mono', 'Courier New', monospace;

  /* Brand tracking: headings -3%, sub headings -1% */
  --tracking-heading: -0.03em;
  --tracking-subheading: -0.01em;

  /* Type Scale */
  --text-display-lg: 48px;
  --text-display-md: 36px;
  --text-display-sm: 30px;
  --text-heading-lg: 24px;
  --text-heading-md: 20px;
  --text-heading-sm: 18px;
  --text-body-lg: 16px;
  --text-body-md: 14px;
  --text-body-sm: 12px;

  /* Font Weights (Urbanist: Light 300 / Regular 400 / plus UI weights) */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line Heights */
  --lh-display-lg: 1.2;
  --lh-display-md: 1.25;
  --lh-display-sm: 1.3;
  --lh-heading-lg: 1.35;
  --lh-heading-md: 1.4;
  --lh-body: 1.5;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-btn: 8px;
  --radius-card: 12px;
  --radius-dialog: 16px;
  --radius-chip: 16px;

  /* Shadows (minimal — flat design, 0-4 max) */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.12);
  --shadow-2: 0 2px 4px rgba(0,0,0,0.14);
  --shadow-3: 0 3px 8px rgba(0,0,0,0.16);
  --shadow-4: 0 4px 12px rgba(0,0,0,0.18);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}