/* Exo Pro design tokens · direction A, Wayfinding
   Source: brandbook/index.html (§2–§8) and kit/palette.json.
   Load first: tokens.css → components.css → page styles.
   Rule for the site build: no new colours, sizes or curves. Use these names. */

@font-face {
  font-family: "Archivo";
  src: url(fonts/archivo-vf.woff2) format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url(fonts/ibm-plex-mono-500.woff2) format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* ── Colour (§3, palette.json: six tokens, nothing else) ── */
  --ground: #121513;   /* page background; never pure black */
  --panel: #1b1f1c;    /* raised surface: media slot, cards, board */
  --rule: #323832;     /* hairlines, dividers; decorative only, never text */
  --ink: #eeefe9;      /* primary text and headings */
  --ink-soft: #a6aca4; /* secondary text: intro text, captions, labels */
  --signal: #f2c12e;   /* amber: the one accent; one amber area per view */

  /* ── Font families (§4) ── */
  --font: "Archivo", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace; /* times, stand numbers, counts, labels only */

  /* ── Font width: wdth axis via font-stretch (§4) ── */
  --wdth-text: 100%;    /* body, lead, small, mobile display */
  --wdth-ui: 108%;      /* H3, buttons, mobile H2 */
  --wdth-display: 116%; /* display / H1 */
  --wdth-section: 125%; /* H2 */

  /* ── Font weight ── */
  --wght-regular: 400;
  --wght-strong: 600;   /* strong in body, labels */
  --wght-bold: 700;     /* H3, buttons */
  --wght-heavy: 800;    /* display, H2 */
  --wght-mono: 500;

  /* ── Type scale, px → rem (§4: 12 · 14 · 16 · 18 · 21 · 26 · 32 · 44 · 64 · 82) ── */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;  /* mono on boards (§4 "Mono 15") */
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-21: 1.3125rem;
  --fs-26: 1.625rem;
  --fs-32: 2rem;
  --fs-44: 2.75rem;
  --fs-64: 4rem;
  --fs-82: 5.125rem;

  /* ── Type roles (size / line height / tracking) ── */
  --fs-display: clamp(2.5rem, 5.7vw, var(--fs-82)); /* never above 6rem */
  --lh-display: 0.98;
  --ls-display: -0.025em;                           /* never below -0.04em */
  --fs-h2: clamp(1.75rem, 3vw, var(--fs-44));
  --lh-h2: 1;
  --ls-h2: -0.01em;
  --fs-h3: var(--fs-21);
  --lh-h3: 1.15;
  --fs-lead: var(--fs-21);
  --lh-lead: 1.5;
  --fs-body: var(--fs-18);
  --lh-body: 1.55;
  --fs-button: var(--fs-18);
  --fs-small: var(--fs-14);
  --lh-small: 1.45;
  --fs-label: var(--fs-12);
  --ls-label: 0.12em;
  --fs-mono: var(--fs-15);
  --measure: 68ch;       /* body measure 65–75 characters */
  --measure-lead: 44ch;

  /* ── Spacing: base step 4 px (§5) ── */
  --step: 4px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ── Radius (as used in the brand book) ── */
  --radius-chip: 3px;  /* stops, labels, chips */
  --radius-plate: 4px; /* buttons, inputs, board, logo plate */
  --radius-card: 6px;  /* cards, media slot, figures */

  /* ── Elevation: no shadows, no glows (§9). A raised surface is panel + rule hairline. ── */
  --shadow: none;
  --hairline: 1px solid var(--rule);

  /* ── Lines (§6) ── */
  --rail: 3px;          /* route line in interface rails */
  --rail-diagram: 5px;  /* route line on an 800-wide diagram */
  --icon: 24px;         /* icon grid; 2 px stroke, round joins */
  --icon-stroke: 2px;

  /* ── Focus ── */
  --focus-ring: 3px solid var(--signal);
  --focus-offset: 3px;

  /* ── Grid (§5). 1440: 12 col · gutter 24 · margin 48 · content max 1360 ── */
  --grid-cols: 12;
  --grid-gutter: 24px;
  --grid-margin: 48px;
  --grid-max: 1360px;
  --bp-tablet: 768px;  /* reference only: media queries cannot read custom properties */
  --bp-desktop: 1024px;

  /* ── Motion (§8): one authored moment per view ── */
  --dur-route: 3.2s;
  --delay-route: 0.4s;
  --ease-route: cubic-bezier(0.6, 0, 0.3, 1);
  --dur-flip: 0.5s;
  --stagger-flip: 0.8s;
  --ease-flip: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-nudge: 0.2s;
  --ease-nudge: ease-out;
  --nudge: 4px;
}

/* 768: 8 columns. Not drawn in the brand book; derived on the 4 px step between 1440 and 390. */
@media (max-width: 1023px) {
  :root {
    --grid-cols: 8;
    --grid-gutter: 24px;
    --grid-margin: 32px;
  }
}

/* 390: 4 columns · gutter 16 · margin 16. Its own layout, not a shrunk desktop (§5). */
@media (max-width: 767px) {
  :root {
    --grid-cols: 4;
    --grid-gutter: 16px;
    --grid-margin: 16px;
    --fs-display: clamp(2.35rem, 10.4vw, 2.9rem); /* §4: 390 display 40, wdth 100 */
    --lh-display: 1.02;
    --wdth-display: 100%;
    --fs-h2: 1.75rem;
    --wdth-section: 108%;
    --fs-lead: 1.125rem;
    --fs-body: 1.0625rem;
  }
}

/* §8: reduced motion turns every animation and transition off; the page shows the end state. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-route: 0s;
    --delay-route: 0s;
    --dur-flip: 0s;
    --stagger-flip: 0s;
    --dur-nudge: 0s;
    --nudge: 0px;
  }
}