:root {
  --font-display: 'IBM Plex Sans', 'Inter', system-ui, sans-serif;
  --font-base: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- Brand ---- */
  --c-navy:      #031847;
  --c-steel:     #8D9098; /* logo grey — decorative rules only, fails text contrast on white */
  --c-orange:    #F88120;
  --c-orange-2:  #e0700f;
  --c-orange-3:  #ffa04f;

  /* Navy scale — for layering inside dark navy panels */
  --c-navy-700:  #04205e;
  --c-navy-600:  #072a76;

  /* ---- Graphite: the second dark tone, standing in for navy where
     two dark bands would otherwise flatten into one ---- */
  --c-graphite:      #101319;
  --c-graphite-2:    #171B23;
  --c-graphite-3:    #212734;
  --c-graphite-line: rgba(255, 255, 255, 0.10);

  /* ---- Neutrals derived from navy ---- */
  --c-bg:        #ffffff;
  --c-surface:   #F5F7FB;
  --c-surface-2: #EBEFF7;
  --c-line:      #E4E8F0;
  --c-line-2:    #CBD3E2;
  --c-muted:     #5A6478;
  --c-ink-2:     #21304C;
  --c-ink:       #031847;
  --c-invert:    #ffffff;
  --c-invert-70: rgba(255, 255, 255, 0.72);
  --c-invert-50: rgba(255, 255, 255, 0.5);
  --c-invert-line: rgba(255, 255, 255, 0.16);

  /* ---- Space ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  /* Section rhythm — 128px on a wide screen, and it actually comes
     down on a phone. A 72px floor kept every band phone-tall. */
  --section-pad: clamp(48px, 8vw, 128px);

  /* ---- Radii: one family, so nothing reads as a stray widget ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  --container-max: 1320px;
  --container-pad: 24px;

  /* ---- Type scale: raised, so headings carry the page ---- */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-md: 18px;
  --font-size-lg: 22px;
  --font-size-xl: 28px;
  --font-size-2xl: clamp(28px, 4.2vw, 56px);
  --font-size-3xl: clamp(32px, 5.6vw, 78px);
  --font-size-4xl: clamp(36px, 8vw, 116px);

  /* ---- Elevation: navy-tinted, never neutral grey ---- */
  --shadow-sm: 0 2px 8px rgba(3, 24, 71, 0.05);
  --shadow-md: 0 12px 32px rgba(3, 24, 71, 0.08);
  --shadow-lg: 0 24px 64px rgba(3, 24, 71, 0.14);
  --shadow-xl: 0 32px 80px rgba(3, 24, 71, 0.22);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --z-header: 100;
}

/* Phone: one step down the space scale, and the mid type sizes that
   otherwise stay at their desktop values. Wide screens keep the :root
   numbers above. */
@media (max-width: 767px) {
  :root {
    --container-pad: 16px;
    --font-size-md: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 22px;
    --space-4: 20px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 56px;
    --space-9: 72px;
  }
}