/* =========================================================================
   Shoti — design tokens. One definition, every page.

   These values lived in six places: styles.css, chrome.css, the three essay
   stylesheets, security/, and demo/. They had already drifted — the security
   page was still carrying the pre-audit `--ink-dim` and `--ink-faint`, which
   is to say it was still failing the contrast check the essays had been fixed
   for. That is what duplicated tokens do: the fix lands on the copies someone
   remembered.

   Load this FIRST on every page, before any other stylesheet.

   THERE ARE TWO INK SCALES, AND THAT IS DELIBERATE. The `--fx-*` set is the
   chrome and the landing page: brighter, higher contrast, made to sit on the
   ASCII field and be read in a glance. The unprefixed set is long-form
   reading: a softer ink on a canvas one step off black, which is easier to
   read a thousand words in. Same family, two jobs. Do not collapse them into
   one without deciding which reading loses.

   Palette authority: marketing/DESIGN-MARKETING.md §0.
   ========================================================================= */

:root {
  /* ---------------------------------------------------- chrome + landing */
  /* fabraix's scale, blessed as the marketing system 2026-08-27 (§0). */
  --fx-black: #000000;
  --fx-off-black: #09090a;
  --fx-dark: #121213;
  --fx-line: #262628;
  --fx-ash: #78787a;        /* raised from #6e6e70 — the minimum that clears
                               WCAG AA for small text on #000 and #09090a */
  --fx-smoke: #a8a8aa;
  /* One step under the off-white, on the off-white's warm side rather than
     the smoke's neutral one: for a light plane that must read as grey against
     the page rather than as paper. Arrived with the core-feature plates, where
     the crate's lit face would otherwise be the brightest thing on the page. */
  --fx-chalk: #d4d1cb;
  --fx-off-white: #f4f2ee;
  --fx-orange: #ff6a00;     /* the one accent, used as ink; the field's burn */

  --fx-border-soft: rgba(244, 242, 238, 0.1);

  /* Their fluid space scale: a fixed floor, growing with the viewport past
     1440. --fx-space-md is what every menu row's padding is built on. */
  --fx-space-xs: max(0.5rem, calc(12 / 1440 * 100vw));
  --fx-space-sm: max(0.75rem, calc(16 / 1440 * 100vw));
  --fx-space-md: max(1rem, calc(24 / 1440 * 100vw));
  --fx-space-lg: max(1.5rem, calc(32 / 1440 * 100vw));

  /* The pill and the rail panel are near-black, not a grey step above it —
     theirs is rgb(9 9 10 / .97) over black, which is what this flattens to. */
  --fx-raised: #09090a;
  --fx-nav-h: 50px;
  --fx-nav-w: min(440px, calc(100vw - 2rem));
  --fx-radius: 4px;
  --fx-radius-lg: 6px;
  --fx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fx-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --fx-dur: 0.5s;
  --fx-edge: max(16px, calc(24 / 1440 * 100vw));

  /* ------------------------------------------------------- long-form read */
  /* The essays, security, help, troubleshooting. Kyo tokens from DESIGN.md. */
  --canvas: #08090b;
  --surface-1: #121215;
  --surface-2: #18181d;
  --ink: #dcd9d2;
  --ink-muted: #9a948a;
  --ink-dim: #817c74;       /* both raised to clear 4.5:1 on --surface-1; */
  --ink-faint: #817c71;     /* the security page never got this fix          */
  --hairline: #1a1a1e;
  --hairline-mid: rgba(244, 242, 238, 0.10);
  --hairline-strong: #252529;
  --accent: #c98562;        /* the reading accent stays clay — used as ink */
  --accent-hover: #dd9270;
  --accent-quiet: #2a1d15;
  --warm: #c89952;

  /* ------------------------------------------------------------ type + space */
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* 8px scale, one 4px half-step — DESIGN.md §4. */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-18: 72px; --s-20: 80px;
  --s-24: 96px; --s-32: 128px;
}