/* ============================================================================
   toekom.st — design tokens
   Single source for colour, type, space, motion. No hard-coded values after
   this file. Ramps generated in OKLCH (build/gen-ramps.mjs); contrast verified
   AA (build/_contrast.mjs) — see DECISIONS.md.
   ========================================================================== */

/* ---- self-hosted fonts -------------------------------------------------- */
/* Bluu Next (Velvetyne, OFL) ships Bold / Bold-Italic / Titling only — no
   regular. We use Titling for the logotype + numerals, Bold for display. */
@font-face {
  font-family: "Bluu Next";
  src: url("fonts/bluunext-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bluu Next";
  src: url("fonts/bluunext-700italic.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Bluu Next Titling";
  src: url("fonts/bluunext-titling.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---- colour ramps (OKLCH-even, base @500) --------------------------- */
  /* red — base #E54B4B @500 */
  --red-50: #FFECE8;  --red-100: #FFDCD6; --red-200: #FFBDB5; --red-300: #FF978F;
  --red-400: #FA6C68; --red-500: #E54B4B; --red-600: #C63437; --red-700: #9C2025;
  --red-800: #6F1317; --red-900: #44090B;
  /* blue — base #005397 @500 */
  --blue-50: #E8F8FF;  --blue-100: #D7F0FF; --blue-200: #B5DEFF; --blue-300: #8FC4FF;
  --blue-400: #66A4E9; --blue-500: #005397; --blue-600: #3274B8; --blue-700: #205891;
  --blue-800: #133D67; --blue-900: #09243F;
  /* green — base #32B67A @500 */
  --green-50: #E5FDEE;  --green-100: #D1F8E0; --green-200: #AAEBC5; --green-300: #7CD6A5;
  --green-400: #48B981; --green-500: #32B67A; --green-600: #008952; --green-700: #006A3C;
  --green-800: #004A28; --green-900: #002C16;
  /* yellow — base #F2B705 @500 */
  --yellow-50: #FFF5DB;  --yellow-100: #FFEBC0; --yellow-200: #F7D58F; --yellow-300: #E6B953;
  --yellow-400: #CB9700; --yellow-500: #F2B705; --yellow-600: #9B6600; --yellow-700: #794D00;
  --yellow-800: #553400; --yellow-900: #331E00;
  /* orange — base #E2742A @500 */
  --orange-50: #FFF0E1;  --orange-100: #FFE3CB; --orange-200: #FFC8A3; --orange-300: #FFA774;
  --orange-400: #E78243; --orange-500: #E2742A; --orange-600: #B54F00; --orange-700: #8E3900;
  --orange-800: #652600; --orange-900: #3D1500;
  /* cream — warm neutral, light→dark (brand cream #EFE8D8 ≈ 100) */
  --cream-50: #FBF6EB;  --cream-100: #F1ECE1; --cream-200: #E3DBC8; --cream-300: #C9C1AF;
  --cream-400: #A59E8D; --cream-500: #827B6B; --cream-600: #625C4C; --cream-700: #494233;
  --cream-800: #302B22; --cream-900: #1B170E;
  /* ink — warm charcoal for dark surfaces, base #241C16 */
  --ink-50: #FBF6F2;  --ink-100: #F1ECE8; --ink-200: #E2DAD4; --ink-300: #C8C0BA;
  --ink-400: #A49D97; --ink-500: #817A75; --ink-600: #625B56; --ink-700: #48413D;
  --ink-800: #2F2B28; --ink-900: #1A1613;

  /* ---- data palette (charts) ------------------------------------------ */
  --data-red:    var(--red-500);
  --data-blue:   var(--blue-500);
  --data-green:  var(--green-600);
  --data-yellow: var(--yellow-500);
  --data-orange: var(--orange-500);

  /* ---- type ----------------------------------------------------------- */
  /* Bluu Next carries display (chapter titles, logotype, numerals);
     Poppins carries body + UI. White Raumkonzept-style paper underneath. */
  --font-display: "Bluu Next", Georgia, "Times New Roman", serif;
  --font-titling: "Bluu Next Titling", "Bluu Next", Georgia, serif;
  --font-body:    "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* fluid modular scale — body ~1.25, display ~1.333 */
  --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.89rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.16rem + 0.45vw, 1.50rem);
  --step-2:  clamp(1.56rem, 1.41rem + 0.75vw, 2.00rem);
  --step-3:  clamp(1.95rem, 1.71rem + 1.20vw, 2.66rem);
  --step-4:  clamp(2.44rem, 2.05rem + 1.95vw, 3.55rem);
  --step-5:  clamp(3.05rem, 2.45rem + 3.00vw, 4.74rem);
  --step-6:  clamp(3.82rem, 2.90rem + 4.60vw, 6.31rem);
  --step-7:  clamp(4.77rem, 3.38rem + 6.95vw, 8.41rem);
  --step-8:  clamp(5.96rem, 3.85rem + 10.6vw, 11.2rem);
  --stat-figure: clamp(4rem, 18vw, 16rem);

  --leading-body:    1.6;
  --leading-display: 1.02;
  --leading-snug:    1.18;
  --measure: 66ch;
  --tracking-tight: -0.02em;
  --tracking-caps:   0.08em;

  /* ---- space (1.5 step) ----------------------------------------------- */
  --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem;
  --space-s: 1rem;      --space-m: 1.5rem;   --space-l: 2.25rem;
  --space-xl: 3.5rem;   --space-2xl: 5.5rem; --space-3xl: 8.5rem;
  --space-4xl: 13rem;

  /* ---- grid ----------------------------------------------------------- */
  --page-max: 78rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --columns: 12;

  /* ---- motion --------------------------------------------------------- */
  --ease: cubic-bezier(.2,.6,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: 600ms;
  --dur-fast: 280ms;

  /* ---- elevation / lines ---------------------------------------------- */
  --hair: 1px;
  --radius: 2px;
}

/* ======================  SEMANTIC TOKENS  ================================ */
/* Raumkonzept restyle: white paper only — no dark mode, no cream. Colour
   arrives per chapter via --theme/--theme-text/--wash set inline by the build. */
:root {
  color-scheme: light;
  --bg:        #FFFFFF;
  --bg-raised: #FFFFFF;
  --bg-sunken: #F5F5F5;
  --ink:       #111111;
  --ink-muted: #4D4D4D;
  --ink-faint: #8A8A8A;
  --accent:    var(--red-500);     /* brand red — logotype, premise, site */
  --link:      var(--red-600);
  --link-hover:var(--red-500);
  --on-accent: #FFFFFF;
  --rule:      rgba(0, 0, 0, 0.12);      /* black-10 hairlines */
  --rule-strong: rgba(0, 0, 0, 0.28);
  --grid-line: rgba(0, 0, 0, 0.05);
  --focus:     var(--blue-500);
  --safe:      var(--green-600);
  --breach:    var(--red-600);
  --grain-opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}