/* ============================================================================
   TOKENS - copied from stackup-website/src/styles/tokens.css (at 1747427), whose source of truth
   is stackup-docs/design/web-design-language.md. The shared tokens must stay equal to the
   website's: `verify` (web: tokens) warns when they drift. The web app's own additions follow the
   copy, after the marker below, and are not compared.
   ============================================================================ */

:root {
  --ink: #10201C;
  --ink-2: #3C534D;
  /* Was #6B827B until 2026-09-28: 3.75:1 on --ground and 4.11:1 on --panel, under WCAG's 4.5:1
     everywhere it set text (captions, promise lines, footer headings, table headers). ui-critic
     measured it while reviewing the changelog; this is the lightest value of the same hue that
     passes on both surfaces (4.56:1 ground, 5.01:1 panel). Dark theme's value already passed. */
  --ink-3: #5E746D;
  --ground: #F2F5F3;
  --panel: #FFFFFF;
  --line: #DCE4E0;
  --teal: #2E6E62;
  --teal-soft: #DCE8E5;

  /* Ink that sits ON a filled teal control. This is the app's ThemeColors.OnAccent
     rule and it is NOT decorative: --teal is a light mint in dark mode, so a
     hard-coded white here measures 2.10:1 — a WCAG AA failure on the install
     button, the one element on this site with a job. Light 5.96:1, dark 8.03:1. */
  --on-teal: #FFFFFF;

  --up: #2E8B57;
  --down: #C0564F;
  --keep: #8A8F98;

  --shadow: 0 1px 2px rgba(16, 32, 28, .06), 0 8px 24px rgba(16, 32, 28, .06);

  --radius: 14px;
  --radius-sm: 10px;
  --gutter: 24px;
  --col: 1180px;

  /* Vertical rhythm. Steps down on the SAME three breakpoints the rest of the
     system uses -- air that opens a page up on a laptop only makes a phone
     tiring to scroll, because the reader travels the same distance with a
     fraction of the content in view. A fourth breakpoint for spacing alone
     would be the start of the drift the three-breakpoint rule prevents. */
  --section-y: 72px;
}

@media (max-width: 860px) { :root { --section-y: 56px; } }
@media (max-width: 640px) { :root { --section-y: 48px; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #E8EFEB;
    --ink-2: #A8BAB3;
    --ink-3: #7C918A;
    --ground: #101412;
    --panel: #1A201D;
    --line: #2C3733;
    --teal: #7FBFB2;
    --teal-soft: #243530;
    --on-teal: #10201C;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  }
}

/* No toggle ships — a marketing site is a short single visit, and a toggle costs
   a persisted preference plus an FOUC script. Kept so adding one later is free. */
:root[data-theme="dark"] {
  --ink: #E8EFEB;
  --ink-2: #A8BAB3;
  --ink-3: #7C918A;
  --ground: #101412;
  --panel: #1A201D;
  --line: #2C3733;
  --teal: #7FBFB2;
  --teal-soft: #243530;
  --on-teal: #10201C;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
}

/* ---- web app only (web-design-language.md, "The web app"; owner, 2026-09-29) ----------------- */
:root {
  /* The destructive fill: deeper than --down so white text passes - white on #B34A44 is 5.28:1
     (on --down it would be 4.48:1, a fail at 15px/600); the fill stands out against the dark
     --panel at 3.14:1. The same in both themes, so no dark override. Irreversible actions only. */
  --danger: #B34A44;
  --on-danger: #FFFFFF;
  /* Google's own button colours (its branding guidelines) - not ours to restyle. */
  --g-fill: #FFFFFF;
  --g-stroke: #747775;
  --g-ink: #1F1F1F;
}
@media (max-width: 640px) { :root { --gutter: 16px; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; --g-fill: #131314; --g-stroke: #8E918F; --g-ink: #E3E3E3; }
}
:root[data-theme="dark"] { color-scheme: dark; --g-fill: #131314; --g-stroke: #8E918F; --g-ink: #E3E3E3; }