/*
 * The Round: tokens. The one source of truth for colour, type, space and motion.
 * Colours are light-dark() pairs, so the platform's theme control (theme.js,
 * which sets color-scheme) switches every one. A site overrides the semantic
 * names on :root in its own site.css; it never overrides the family names.
 * Every pair is computed in docs/plan/panel/round2/directions/h/brief.md, 12.
 */
:root {
  color-scheme: light dark;

  /* Family: ink on rice paper. Her orange only in the seal and on the call. */
  --paper: light-dark(#EEF0EC, #101215);
  --paper-raised: light-dark(#F8F9F6, #181B1F);
  --paper-sunk: light-dark(#E4E7E2, #0B0D0F);
  --ink-family: light-dark(#15171B, #ECEEEA);
  --ink-family-2: light-dark(#4A515C, #A9B0B8);
  --line-family: light-dark(#C5CBC6, #2B3036);
  --line-family-strong: light-dark(#7A817F, #7E868D);
  --seal: #ED802B;
  --call: light-dark(#A84A12, #F0913F);
  --call-deep: light-dark(#8E3D0E, #F5A45C);
  --call-ink: light-dark(#FFFFFF, #1A0E04);

  /* The nine areas: a text-capable mark and a pale tint each. */
  --a-organise: light-dark(#3662BA, #6E92DD);
  --a-simplify: light-dark(#21716E, #29A39F);
  --a-juggle: light-dark(#22752D, #2FA83F);
  --a-declutter: light-dark(#566D20, #7EA329);
  --a-stage: light-dark(#7E6125, #B58A33);
  --a-style: light-dark(#A44B30, #DA7656);
  --a-celebrate: light-dark(#B43463, #DE6B95);
  --a-design: light-dark(#9738C0, #BD74DD);
  --a-share: light-dark(#684FCC, #9887E2);
  --t-organise: light-dark(#DFE5F1, #1B2232);
  --t-simplify: light-dark(#DFF1F0, #1B3231);
  --t-juggle: light-dark(#DFF1E2, #1B321E);
  --t-declutter: light-dark(#ECF1DF, #2B321B);
  --t-stage: light-dark(#F1EBDF, #322A1B);
  --t-style: light-dark(#F1E3DF, #32201B);
  --t-celebrate: light-dark(#F1DFE6, #321B23);
  --t-design: light-dark(#ECDFF1, #2B1B32);
  --t-share: light-dark(#E3DFF1, #1F1B32);

  /* Semantic names: a site sets these to its own palette. */
  --ground: var(--paper);
  --ground-raised: var(--paper-raised);
  --ground-sunk: var(--paper-sunk);
  --ink: var(--ink-family);
  --ink-2: var(--ink-family-2);
  --line: var(--line-family);
  --line-strong: var(--line-family-strong);
  --accent: var(--ink-family);
  --tint: var(--paper-raised);
  --focus: var(--ink);

  /* Type. --face-family stays Funnel Display on every site (the rim, the dock, the passage). */
  --face-family: "Funnel Display", "Funnel Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --face-display: var(--face-family);
  --face-text: "Funnel Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --face-measure: "Spline Sans Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --step-display: clamp(2.25rem, 1.3rem + 3.6vw, 4.5rem);
  --step-1: clamp(1.5rem, 1.15rem + 1.3vw, 2.25rem);
  --step-2: clamp(1.25rem, 1.08rem + 0.6vw, 1.5rem);
  --step-0: 1.0625rem;
  --step-small: 0.875rem;
  --step-quiet: 0.75rem;
  --track-display: -0.02em;
  --track-caps: 0.28em;
  --measure: 68ch;

  /* Space and shape. */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 6rem;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --radius: 14px;
  --radius-pill: 999px;
  --target: 44px;
  --header-h: 64px;
  --dock-h: 0px;

  /* Motion: transform and opacity only, cubic-bezier easing, never linear(). */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-turn: cubic-bezier(.65, 0, .35, 1);
  --ease-in: cubic-bezier(.55, 0, .75, .2);
  --t-press: 120ms;
  --t-swap: 180ms;
  --t-slide: 240ms;
  --t-turn: 420ms;
  --t-open: 520ms;
  --t-arrive: 620ms;
  --t-flip: 640ms;
  --t-seal-arrive: 1150ms;

  /* The platform's handoff layer stands down: passage.js draws the passage. */
  --handoff-colour: transparent;
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
@media (max-width: 719px) { :root { --header-h: 56px; } }