/* River~Code — design tokens. §G16.
   No component may contain a hard-coded hex, spacing, radius or duration value.
   Everything comes from this block. */

:root {
  /* ── Colour — core (§G3) ─────────────────────────────── */
  --ink:            #1C1C1C;
  --paper:          #F7F6F3;
  --white:          #FFFFFF;
  --muted:          #6E6E6E;
  --line:           #E2E0DB;
  /* One hue, two weights. --flow IS the logo cyan, used wherever a fill or
     a stroke on ink can carry it. --deep is that same hue (198°) darkened
     only as far as it must go to pass AA as text on paper: 4.64:1.
     There is no second accent colour on this site. */
  --deep:           #00789F;
  --flow:           #44C1F6;

  /* ── Colour — functional (§G3) ───────────────────────── */
  --paper-inset:    #EFEDE8;
  --ink-hover:      rgba(28,28,28,0.06);
  --ink-active:     rgba(28,28,28,0.10);
  --deep-hover:     #0A6584;
  --error:          #A32E17;
  --success:        #1F6B3F;
  --focus:          var(--deep);
  --disabled:       #A9A7A2;
  /* --muted is 4.43:1 on --paper-inset: fine for prose at 16px, under AA
     for 12px mono. Prices are the one thing that must be readable. */
  --muted-strong:   #5A5A5A;

  /* ── Added in build, documented deviation ─────────────
     §G3 gives no hairline value for use ON ink. G8 assigns --line
     to secondary text on ink; a rule at full --line is too loud.
     Two derived tokens, no new hue. */
  --line-on-ink:    rgba(226,224,219,0.20);
  --muted-on-ink:   rgba(226,224,219,0.72);
  --flow-seam:      rgba(68,193,246,0.40);   /* §G2 item 4 */

  /* ── Type (§G4) ──────────────────────────────────────── */
  --font-sans:      "Archivo", system-ui, -apple-system, sans-serif;
  --font-mono:      "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --t-display:      clamp(32px, 2.9vw, 42px);
  --t-h2:           clamp(26px, 3.8vw, 40px);
  --t-h3:           clamp(20px, 2.2vw, 24px);
  --t-body-lg:      clamp(17px, 1.6vw, 19px);
  --t-body:         clamp(16px, 1.4vw, 17px);
  --t-small:        clamp(14px, 1.2vw, 15px);
  /* Two label sizes, because one was doing two jobs. --t-label is for
     captions nobody has to read closely (section eyebrows, meta rows);
     12px is the floor. --t-label-lg is for label-shaped text that
     carries meaning — hero annotations, footer column headers. */
  --t-label:        clamp(12px, 1vw, 13px);
  --t-label-lg:     clamp(13px, 1.1vw, 14px);
  --t-metric:       clamp(32px, 4vw, 44px);
  --t-metric-sm:    clamp(24px, 2.6vw, 30px);

  /* ── Spacing (§G6) ───────────────────────────────────── */
  --gap-0:  4px;   --gap-1:  8px;   --gap-2: 16px;  --gap-3: 24px;
  --gap-4: 32px;   --gap-5: 48px;   --gap-6: 64px;
  --gap-7: 96px;   --gap-8: 128px;

  /* ── Shape (§G7) ─────────────────────────────────────── */
  --r-sm:   4px;
  --r-md:   6px;
  --border: 1px solid var(--line);
  --border-ink: 1px solid var(--line-on-ink);

  /* ── Grid (§G5) ──────────────────────────────────────── */
  --max-w:      1200px;
  --page-top:   40px;
  --outer:      20px;
  --gutter:     24px;
  --measure:    34em;

  /* ── Motion (§G14) ───────────────────────────────────── */
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --dur-micro:    120ms;
  --dur-ui:       200ms;
  --dur-draw:     600ms;
  --dur-draw-lg:  800ms;

  /* ── Flow stroke (§G2) ───────────────────────────────── */
  --flow-amplitude: 0.18;
  --flow-control:   0.36;
  --flow-weight:    2.5px;
  --manual-weight:  1.5px;
}

@media (min-width: 768px)  { :root { --outer: 32px; --gutter: 32px; } }
@media (min-width: 1024px) { :root { --outer: 40px; --gutter: 40px; --page-top: 56px; } }