/* GENERATED by tools/build_site.py from design/tokens.css — do not edit. */
/* ScrumIA design tokens — the vocabulary. Custom properties only.
 *
 * A theme is a token redefinition, never a second stylesheet. The redefinition
 * is written with light-dark(): one pair per token, resolved against the used
 * color-scheme. The two selectors below carry no palette at all — they only say
 * which scheme is in force — so a palette value exists in exactly one place and
 * the toggle can never drift from the system preference.
 *
 * Every decision below follows from design/identity.md. Read it before adding a
 * token; a value that cannot be justified from that file is a value nobody chose.
 *
 * Generated into site/assets/tokens.css by tools/build_site.py — edit here, never there.
 */

:root {
  /* Consumed by style.css as `color-scheme: var(--color-scheme)`. Two values
   * means "either, ask the system"; the two blocks after this one narrow it. */
  --color-scheme: light dark;

  /* Ground and surfaces — the cold substrate the agents work on. Dark is the
   * ground the identity asks for; light is the same page seen in daylight, not
   * a second design. light-dark() takes light first: an argument order fixed by
   * CSS, not a statement of which one the site is really written in. */
  --ground: light-dark(#F8F5F0, #000B1C);
  --surface: light-dark(#FFFFFF, #08192E);
  --surface-raised: light-dark(#FFFFFF, #0D2540);
  --surface-sunken: light-dark(#F1ECE4, #02101F); /* code, inputs — things you type into */
  --border: light-dark(#E1D9CD, #153453);
  --border-strong: light-dark(#8C7F6D, #3B7CAD);  /* control outlines: carries the 3:1 UI minimum */

  /* Text */
  --text: light-dark(#0A1626, #EAF2FA);
  --text-soft: light-dark(#3C4C5E, #A9C2D6);
  --text-faint: light-dark(#59687A, #7C95AB);

  /* The one accent. Cyan points; if two things point, neither does. */
  --accent: light-dark(#0A6076, #73E3FF);
  --accent-surface: light-dark(#DFF1F7, #07293C); /* accent as a background wash */
  --accent-ink: light-dark(#FFFFFF, #00121E);     /* text laid on --accent */

  /* The two actors. These names say the job, not the hue, which is why they
   * survived the inversion in #52 with every consumer untouched: a rule written
   * as `.step-human .step-dot { border-color: var(--human) }` was already correct after.
   *
   * Cold human. Blue marks every point where a person decides — and nothing else.
   * It sits at OKLCh hue 263°, pure blue's own hue and a full category off the
   * accent's cyan. That distance is load-bearing, not taste: the human mark is the
   * one thing on a screen that must never be mistaken for the thing that points. */
  --human: light-dark(#2650AC, #85AAF2);
  --human-surface: light-dark(#DFE5FF, #12204A);

  /* Warm agent. Coral marks every point where an agent runs. It is the abundant
   * actor — four of the reference run's seven steps — so it is spent as an edge
   * and a label, never as the wash that marks the rare one. */
  --agent: light-dark(#9E4517, #F0996F);
  --agent-surface: light-dark(#FAEBE1, #2B1811);

  --ok: light-dark(#16704F, #54CE94);

  /* Elevation. On navy a shadow is invisible, so depth is carried by the surface
   * step and a hairline; the shadow only deepens what is already there. A shadow's
   * colour is the absence of light rather than a palette entry, which is why these
   * two are the only literals in the file that name no token. */
  --elev-1: 0 1px 2px light-dark(rgb(10 22 38 / 0.06), rgb(0 0 0 / 0.5));
  --elev-2: 0 12px 32px -12px light-dark(rgb(10 22 38 / 0.22), rgb(0 0 0 / 0.7));

  /* The accent's own light, so it follows the accent instead of restating it.
   * Spelling the glow out per theme is how the two copies stopped matching. */
  --glow-accent:
    0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent),
    0 6px 28px -10px color-mix(in srgb, var(--accent) 40%, transparent);

  /* The sky is scenery, not an actor. It keeps the cold blue the agent gave up in
   * #52: a ground spelled from an actor token flips when the actors do, and the
   * ground did not change sides. --halo-far is its only consumer, which is what
   * stops it becoming a fourth actor colour. */
  --sky: light-dark(#175B7A, #6BB8E4);

  /* The ground is never a flat fill: two washes stand for one cold light source
   * behind the page, near and far. Both are mixes of a themed colour, so they
   * cannot drift from the colour they are supposed to be made of. The far wash is
   * the sky rather than --accent — the more distant light is the one that labels,
   * not the one that points.
   * The far wash is the one place a single strength does not serve both themes:
   * on cream, 14% of the sky blue is a lavender field that eats the contrast of
   * anything faint laid on it. Two strengths, still no literal colour. */
  --halo-near: color-mix(in srgb, var(--accent) 11%, transparent);
  --halo-far: light-dark(
    color-mix(in srgb, var(--sky) 7%, transparent),
    color-mix(in srgb, var(--sky) 14%, transparent));
  /* The grid belongs to peripheral vision: it is a hairline, so it is made of the
   * hairline colour and stays neutral on cream instead of tinting the page. */
  --grid-line: color-mix(in srgb, var(--border) 32%, transparent);
  /* The rim light along the planet's limb, and the only *standing* glow below the
   * fold. The run's bloom (#62) is the other light down there and is legal because
   * it is transient and actor-coloured: it lasts one arrival and stands for a state
   * change, where this one is permanent scenery in the accent. */
  --limb-glow: color-mix(in srgb, var(--accent) 26%, transparent);
}

/* The toggle must win over the system preference in both directions. These two
 * blocks are the whole mechanism: they narrow the scheme, and every light-dark()
 * above re-resolves. No palette value is repeated to make a toggle work. */
:root[data-theme="light"] { --color-scheme: light; }
:root[data-theme="dark"] { --color-scheme: dark; }

/* ── Theme-independent ─────────────────────────────────────────────────────
 * Type, space, motion and layout do not change with the theme.
 */
:root {
  /* Typography. Three families, self-hosted as variable woff2 — a voice, not a
   * fallback stack. The fallbacks match each family's metrics closely enough
   * that the swap does not reflow the page. */
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.55rem, 2.6vw, 1.95rem);
  --text-3xl: clamp(2.15rem, 5.2vw, 3.25rem);

  /* Three rungs above the documentation scale. The scale stops at 3.25rem, which
   * is a size for explaining; a claim the reader is supposed to feel needs type
   * that is architecture. Landed here ahead of the sections that spend them
   * (#60, #61, #62) so no section has to invent its own display size. */
  --text-hero: clamp(2.9rem, 9.2vw, 7.5rem);
  --text-display: clamp(2.05rem, 5.4vw, 4rem);
  --text-statement: clamp(1.45rem, 3.2vw, 2.4rem);

  --leading-tight: 1.12;
  --leading-snug: 1.35;
  --leading-body: 1.62;
  --leading-hero: 0.98;   /* at 7.5rem, 1.12 is still too airy */

  /* Sora needs negative tracking at display sizes and none at label sizes. */
  --tracking-display: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-label: 0.09em;
  --tracking-hero: -0.045em;  /* and more of it as it grows */

  --weight-body: 400;
  --weight-medium: 550;
  --weight-strong: 650;
  --weight-display: 700;

  /* Space — a 4px grid. A gap that is not on it is a gap nobody decided.
   * One half-step exists, and only one: mono labels set at --text-xs need less
   * vertical padding than a full step, which would make a pill taller than the
   * word inside it. Anything else that wants 2px wants the grid instead. */
  --space-tight: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  /* The grid continues past 80px: sections are separated by emptiness rather
   * than by borders, and emptiness has to be a rung like everything else. */
  --space-24: 96px;
  --space-32: 128px;
  /* The one spacing value that answers to the viewport: the gap between two
   * sections is a share of the screen, not a fixed distance. */
  --space-section: clamp(96px, 15vh, 176px);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 100px;

  /* Motion stands for causality: something is summoned, or something resolves.
   * The two easings are the same gesture in two directions — summoned things
   * overshoot on the way in, finished things just stop. Hop is named for it. */
  --dur-1: 120ms;   /* pointer feedback */
  --dur-2: 220ms;   /* state change */
  --dur-3: 420ms;   /* an element arriving */
  --dur-4: 700ms;   /* a sequence completing */
  --dur-5: 1400ms;  /* a full summon-and-resolve cycle — Hop's whole life */
  --ease-summon: cubic-bezier(0.2, 0.9, 0.3, 1.18);
  --ease-resolve: cubic-bezier(0.45, 0, 1, 1);
  --ease-move: cubic-bezier(0.4, 0, 0.2, 1);
  /* A harder spring, for the one thing per screen that is allowed to overshoot
   * visibly: Hop landing. Everything else uses --ease-summon and stays polite. */
  --ease-hop: cubic-bezier(0.16, 1.36, 0.3, 1);
  --stagger: 80ms;  /* delay between successive columns of one diagram */
  --stagger-hop: 55ms; /* between Hop's own segments — tighter: it is one body */

  /* Layout */
  --page-max: 1080px;
  /* One width above it, for the one thing that is a horizon rather than a
   * diagram: a run that stops at --page-max has become a table. Spent by #62. */
  --page-wide: 1400px;
  --measure: 68ch;
  --header-h: 58px;
  --focus-width: 2px;
  --focus-offset: 2px;
}