/* AISF · core — design tokens.
   Anchor hue 182: a bioluminescent aqua. Every neutral leans toward it.
   main.js reads the --particle*, --accent and --paper tokens at runtime and
   converts them for the shader, so the canvas never owns a colour this file
   does not. */

@font-face {
  font-family: "Hubot Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  src: url("fonts/hubot-sans-latin-wdth-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Mona Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("fonts/mona-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* paper and ink — dark, tinted toward the anchor hue */
  --paper:        oklch(16% 0.022 220);
  --paper-2:      oklch(20% 0.026 216);
  --ink:          oklch(96% 0.010 195);
  --ink-soft:     oklch(86% 0.018 200);
  --ink-muted:    oklch(73% 0.022 205);

  /* the one accent — used on the CTA, focus, and a few per cent of particles */
  --accent:       oklch(86% 0.150 182);
  --accent-press: oklch(79% 0.140 182);
  --accent-ink:   oklch(22% 0.035 205);
  --focus:        oklch(86% 0.150 182);

  /* the early-access form: field edges (3:1 against paper and paper-2) and the one error colour */
  --rule:         oklch(54% 0.030 205);
  --rule-strong:  oklch(70% 0.030 200);
  --danger:       oklch(78% 0.130 30);

  /* overlays (alpha is a modifier here, not a palette colour) */
  --scrim:        oklch(16% 0.022 220 / 0.72);
  --scrim-soft:   oklch(16% 0.022 220 / 0);
  --bloom:        oklch(30% 0.060 200 / 0.55);

  /* particle palette, read by main.js */
  --particle:     oklch(93% 0.030 205);
  --particle-far: oklch(55% 0.060 225);

  /* type */
  --font-display: "Hubot Sans", "Mona Sans", ui-sans-serif, sans-serif;
  --font-body:    "Mona Sans", ui-sans-serif, sans-serif;

  /* one ratio-ish ladder, clamped. mega is used once (the converge moment);
     sub carries the thin second line of the world headings and the footer */
  --step-mega:    clamp(3rem, 1.4rem + 6.6vw, 8.5rem);
  --step-display: clamp(2.75rem, 1.55rem + 4.3vw, 5.5rem);
  --step-title:   clamp(2.125rem, 1.45rem + 2.5vw, 3.75rem);
  --step-sub:     clamp(1.375rem, 1.1rem + 1.3vw, 2.375rem);
  --step-lede:    clamp(1.125rem, 1.02rem + 0.42vw, 1.375rem);
  --step-body:    clamp(1.0625rem, 1.01rem + 0.18vw, 1.1875rem);
  --step-small:   0.875rem;

  /* space, on a 4px grid */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-s:   0.75rem;
  --space-m:   1rem;
  --space-l:   1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  --gutter: clamp(1.25rem, 0.6rem + 3.2vw, 6rem);
  --measure: 34rem;
  --radius-pill: 999px;

  /* motion (UI only — the object runs on its own clock) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  360ms;

  /* layers */
  --z-stage: 0;
  --z-callouts: 1;
  --z-content: 2;
  --z-nav: 3;
  --z-skip: 4;
}