/* IRMAA Cliff design tokens: "canyon strata". Each IRMAA tier is a rock layer; the deeper the layer, the costlier the premium. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-next.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("/assets/fonts/atkinson-mono.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* surfaces and text */
  --mist: #eef2f4;
  --paper: #ffffff;
  --ink: #172433;
  --ink-2: #3f4c5a;
  --line: #cad3db;
  --control-border: #6b7785;
  /* dusk sky behind the terrain */
  --dusk-1: #14213a;
  --dusk-2: #2b3560;
  --dusk-3: #6a4a6e;
  --dusk-glow: #e59a6a;
  --on-dusk: #f4f1ff;
  --on-dusk-2: #c9cde8;
  /* action */
  --trail: #1d5fd1;
  --trail-deep: #154aa6;
  --link: #1a56c2;
  /* meaning */
  --cliff: #b3362b;
  --safe: #23704c;
  /* strata: tier 0 (standard premium) to tier 5 (top IRMAA tier) */
  --tier-0: #8fb59a;
  --tier-1: #d7b65a;
  --tier-2: #d98b4a;
  --tier-3: #c0573f;
  --tier-4: #8c3d5a;
  --tier-5: #4a2e5c;

  --focus-ring: 3px solid #1d5fd1;
  --focus-offset: 3px;

  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-sans: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-small: 16px;
  --fs-body: 19px;
  --lh-body: 1.6;
  --fs-h3: 23px;
  --fs-h2: 30px;
  --fs-h1: 42px;
  --fs-hero: 58px;
  --track-body: 0;
  --track-display: -0.02em;

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

  --radius-pill: 980px;
  --radius-card: 20px;
  --radius-control: 12px;
  --control-height: 54px;
  --width-prose: 720px;
  --width-wide: 1160px;

  --shadow-card: 0 1px 2px rgba(23, 36, 51, 0.06), 0 12px 32px -12px rgba(23, 36, 51, 0.22);
  --shadow-lift: 0 2px 4px rgba(23, 36, 51, 0.08), 0 28px 60px -20px rgba(20, 33, 58, 0.45);

  --motion-fast: 200ms;
  --motion-slow: 700ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

@media (min-width: 768px) {
  :root {
    --fs-h3: 27px;
    --fs-h2: 40px;
    --fs-h1: 64px;
    --fs-hero: 84px;
  }
}