/* Design tokens (palette, type scale, font families, dark-mode overrides).
   Moved VERBATIM out of public/index.html's inline <style> in step 2 of the
   old-shell retirement plan (old-shell-retirement-plan.md; current leaning,
   open to revision), with no visual or behavioral change: the rules, values and
   order are the same, only the file is new. In step 3 the file moved again,
   from public/css/ into the host lib (public/system/lib/host/styles/), which is
   its natural home: the host page links it before anything else. It is a
   static, cacheable sheet that index.html links BEFORE its inline <style> and
   before every per-app stylesheet, so the cascade is unchanged, and that the
   future minimal main page (and public/host-test.html today) link too. Dark
   mode is the OS setting (prefers-color-scheme), no attribute or class,
   exactly as before. */

:root {
  --ink: #131a2a;
  --slate: #5b6478;
  --slate-light: #8890a0;
  --paper: #fbfbfd;
  --card: #ffffff;
  --brand: #3b6fd6;
  --brand-deep: #16296b;
  --amber: #e8a33d;
  --line: #e6e8f0;
  --radius-icon: 0.219; /* matches the app icon's own corner ratio */

  /* Sept 29 2026 (Ron: "I don't like that dashed-outline convention
     ... I had hoped it would be something we could easily turn off
     later"): controls the shell-wide "selectable, not yet chosen"
     affordance -- originally a dashed border/outline on toolbar mode
     buttons (`.toolbar-tool-btn--mode:not(.is-active)` below) and,
     via this same variable, WordFlex's swap-mode rack tiles
     (styles-live.css's `.wfl-rack--swap-select .wfl-tile`). Default
     is now `solid` (dashed line off); a future preference toggle can
     flip this single variable back to `dashed` to restore the
     original look without touching either rule again. The affordance
     itself isn't gone even at the default -- see the background tint
     added alongside this variable at each of its two use sites,
     which is what actually carries the "you can tap this" signal
     now. */
  --selectable-affordance-style: solid;

  /* ---------- type system (Ron + Claude, Sept 2026) ----------
     Every font-size in the app is meant to derive from these few
     lines instead of being its own hand-picked px value. The app
     shell used to carry ~30 independently-tuned sizes (12px, 12.5px,
     13px etc.) left over from apps having been built in separate
     sessions -- close enough to look like a system, not actually
     driven by one. This collapses that spread onto a 7-step scale,
     all multiplied by --font-scale, which is the ONE knob the
     text-size app (system/apps/text-size/app.js) turns. Change
     --font-scale (via that app, or by hand here for testing) and
     every labeled size below moves together.

     --font-base is the "18pt Calibri"-equivalent master size --
     the point where --font-scale is exactly 1 (100%). It's 16px
     because that's both the browser's own default body size AND
     the minimum iOS Safari needs on a focused text input to avoid
     auto-zooming -- see --fs-md's use in form inputs below via
     max(16px, ...), which keeps that guarantee even if someone
     drags the slider under 100%.

     Steps are named by size, not by role (xl/lg/md/sm/xs/2xs/3xs),
     because the same numeric step gets reused by very different
     ROLES -- e.g. --fs-xs is a mono meta label in one place and a
     plain button caption in another. Font *family* (--font-sans /
     --font-display / --font-mono / --font-accent, just below) is
     what actually carries the "what kind of text is this" meaning;
     size and family are independent choices, set separately at
     each selector.

     The hero/app-shell <h1> is the one exception -- it already used
     a viewport-responsive clamp() for its own reasons (fits a phone
     screen at any width) and keeps that, just with each clamp()
     endpoint multiplied by --font-scale too. See the h1 rule
     itself. */
  --font-scale: 1;      /* 1 = 100%. Text-size app clamps this to 0.3-3. */
  --font-base: 16px;

  --fs-xl:  calc(var(--font-base) * var(--font-scale) * 1.25);     /* 20px @100% -- default app-badge glyph */
  --fs-lg:  calc(var(--font-base) * var(--font-scale) * 1.0625);   /* 17px @100% -- app/card titles */
  --fs-md:  calc(var(--font-base) * var(--font-scale) * 1);        /* 16px @100% -- base reading size + form inputs */
  --fs-sm:  calc(var(--font-base) * var(--font-scale) * 0.875);    /* 14px @100% -- secondary body / panel titles */
  --fs-xs:  calc(var(--font-base) * var(--font-scale) * 0.8125);   /* 13px @100% -- buttons / mono labels */
  --fs-2xs: calc(var(--font-base) * var(--font-scale) * 0.75);     /* 12px @100% -- meta / captions */
  --fs-3xs: calc(var(--font-base) * var(--font-scale) * 0.6875);   /* 11px @100% -- smallest meta text */

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Fraunces", serif;
  --font-mono: "IBM Plex Mono", monospace;
  --font-accent: "Manrope", sans-serif;
}

/* Dark mode (Sept 2026): respects the OS setting, not an in-app
   toggle -- redefines the same handful of color tokens above,
   nothing else (this block is self-contained: it opens AND closes
   its own :root here, deliberately kept separate from the main
   :root above rather than interleaved with it, after a first
   attempt at this accidentally nested the type-system block above
   inside this @media block instead of the plain :root -- which
   silently broke `--font-sans` etc. everywhere, light mode
   included, and fell back to the browser's serif default. Real bug,
   fixed; noted here so it isn't repeated). Every app that colors
   itself via these variables (the shell chrome, and any app
   following the three-tier CSS convention in start-here.md) gets
   dark mode for free from this one block. It does NOT fix an app
   stylesheet that hardcoded a literal hex color instead of using a
   variable (several do, mostly status tints -- green/red/amber
   backgrounds for success/error/warning rows) -- those need their
   own follow-up pass, app by app, as they're noticed; not attempted
   in one shot here since that's a much larger, riskier change than
   swapping nine token values. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eef0f6;
    --slate: #aab2c8;
    --slate-light: #7b8298;
    --paper: #14161f;
    --card: #1c1f2b;
    --brand: #6d97ef;
    --brand-deep: #b9cbf7;
    --amber: #f0b25a;
    --line: #2a2e3d;
  }
}