/* =========================================================================
   tokens.css, the palette. ONE definition per name, for the whole site.

   Every page loads this file before its skin: app.css on the converter and
   tool pages, page.css on the hand-written, writer and legal pages.

   RULES FOR ANYONE REDESIGNING THIS SITE

   1. A colour, radius, shadow, width or type face used by more than one
      component is a token, and it is declared HERE, nowhere else. app.css and
      page.css may not open a :root block; check_tokens() in .gen/build.py
      fails the build if they do.
   2. Tokens are ROLES, not swatches. --surface means "the raised plane", not
      "the cool grey". Both themes fill the same roles.
   3. Elevation reads in opposite directions per theme: a raised surface goes
      LIGHTER than the page in dark, and pure white plus a real shadow in
      light.
   4. Order in this file matters. The print block pins its values last so it
      beats both the base palette and the [data-theme] attribute.
   5. Bump TOKENS_CSS_V in .gen/build.py when this file changes.

   Precision Ledger, 2026-09-17: light-first cool canvas, graphite ink,
   one amber accent with dark label text. The base :root IS the light
   palette so a no-JS visitor never falls into dark. Dark is opt-in via
   [data-theme="dark"].
   ========================================================================= */

:root{
  /* ---- Precision Ledger, light is the default palette ---- */
  --bg:#F3F5F7; --surface:#FFFFFF; --surface-2:#E7EBF0;
  --ink:#17212B; --ink-2:#3D4A56; --muted:#52606D;
  --line:rgba(23,33,43,.12); --line-strong:rgba(23,33,43,.24);
  /* Production amber. #F2B544 measured 1.83:1 as text on white and is
     unusable as a link colour; #E39A2E with dark ink is 6.93:1 on the fill
     and stays the signed production value (AGENTS.md). */
  --accent:#E39A2E; --accent-ink:#17212B; --accent-soft:rgba(227,154,46,.14);
  --accent-deep:#B87716;
  --grad:none; --foil:#B87716; --foil-lit:#E39A2E; --foil-soft:rgba(184,119,22,.10);
  --band:#F3F5F7; --band-2:#E7EBF0; --band-ink:#17212B; --band-muted:#52606D;
  --panel:rgba(23,33,43,.035); --panel-hi:rgba(23,33,43,.055);
  --gl-line:rgba(23,33,43,.04); --aura-hi:rgba(23,33,43,.03); --orb-op:0;
  --ok:#0B7A50; --ok-soft:#DFF3EA;
  --warn:#8A5300; --warn-soft:#FBEED8;
  --bad:#B3271F; --bad-soft:#FBE7E5;
  --shadow-1:0 1px 2px rgba(23,33,43,.06), 0 2px 6px rgba(23,33,43,.05);
  --shadow-2:0 2px 6px rgba(23,33,43,.07), 0 12px 26px rgba(23,33,43,.09);
  --shadow-3:0 4px 14px rgba(23,33,43,.10), 0 26px 60px rgba(23,33,43,.16);
  --glow-accent:none;
  --mark-check:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2.9 8.5 6.2 11.8 13.1 4.6" fill="none" stroke="black" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  --mark-chev:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3.6 6.4 8 10.8 12.4 6.4" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  --r-xs:5px; --r-sm:8px; --r:10px; --r-lg:14px;
  --col:1140px; --col-mid:840px; --card:520px; --measure:688px; --gutter:22px;
  color-scheme:only light;
  --sans:"Inter","Segoe UI","Helvetica Neue",Arial,system-ui,sans-serif;
  --cond:"Inter","Segoe UI","Helvetica Neue",Arial,system-ui,sans-serif;
  --mono:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --head-h:62px;
  --head-glass:rgba(243,245,247,.90);
  --row-hover:rgba(23,33,43,.035);
  --card-top:#FFFFFF; --card-bot:#FFFFFF;
  --tab-track:rgba(23,33,43,.07);
  --tab-active-bg:var(--surface-2);
  --tab-active-ink:var(--ink);
  --tab-active-sh:none;
  --hero-ink:#17212B;
  --hero-muted:#52606D;
  --code:"JetBrains Mono","Cascadia Mono","SF Mono",Menlo,Consolas,monospace;

  /* ---- pinned across themes ------------------------------------------- */
  --foot-bg:#0C1219;
  --foot-ink:#E9EEF4;
  --foot-hi:#fff;
  --foot-story:#79848F;
  --foot-head:#8A95A3;
  --foot-link:#9AA5B1;
  --foot-legal:#7A8694;

  --band-hi:#fff;

  /* Ambient orbs: off by default. Precision Ledger is a working surface,
     not a light show. --orb-op can be raised in a decorative mock, never
     on a tool page. */
  --orb-1:#5C6A80;
  --orb-2:#5C6A80;
  --orb-3:#5C6A80;

  /* THE PAPER, which is the invoice itself. */
  --paper-bg:#fff;
  --paper-ink:#141b25;
  --paper-ink-2:#3d4a5c;
  --paper-head:#0b1119;
  --paper-muted:#5C6A80;
  --paper-rule:#cfd7e2;
  --paper-rule-mid:#dfe5ec;
  --paper-rule-soft:#eaeef3;
}

:root[data-theme="dark"]{
  --bg:#0C1219; --surface:#131B24; --surface-2:#1A2430;
  --ink:#E8EDF3; --ink-2:#B9C4D0; --muted:#8B97A6;
  --line:rgba(255,255,255,.085); --line-strong:rgba(255,255,255,.17);
  --accent:#E39A2E; --accent-ink:#17212B; --accent-soft:rgba(227,154,46,.14);
  --accent-deep:#B87716;
  --grad:none; --foil:#B87716; --foil-soft:rgba(184,119,22,.12);
  --band:#0C1219; --band-2:#15202B; --band-ink:#E8EDF3; --band-muted:#8B97A6;
  --panel:rgba(255,255,255,.032); --panel-hi:rgba(255,255,255,.055);
  --gl-line:rgba(255,255,255,.028); --aura-hi:rgba(227,154,46,.05); --orb-op:0;
  --ok:#3DE8A0; --ok-soft:rgba(61,232,160,.12);
  --warn:#F2B84B; --warn-soft:rgba(242,184,75,.12);
  --bad:#FF7A6E; --bad-soft:rgba(255,122,110,.12);
  --shadow-1:0 1px 2px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
  --shadow-2:0 2px 8px rgba(0,0,0,.5), 0 16px 34px rgba(0,0,0,.42);
  --shadow-3:0 6px 18px rgba(0,0,0,.55), 0 32px 80px -18px rgba(0,0,0,.7);
  --glow-accent:none;
  --head-glass:rgba(12,18,25,.86);
  --row-hover:rgba(255,255,255,.04);
  --card-top:#131B24; --card-bot:#0F161F;
  color-scheme:dark;
  --hero-ink:#E8EDF3;
  --hero-muted:#8B97A6;
}

/* ---- Precision Ledger work surface ------------------------------------
   These are CONSTANTS, not theme members: the product is a light working
   surface by decision. Names keep the v5 prefix so existing component
   selectors do not need a mass rename. Cool canvas, not cream. */
:root{
  --v5-bg:#F3F5F7; --v5-surface:#FFFFFF; --v5-sand:#E7EBF0;
  --v5-line:#D5DCE3; --v5-line-strong:#B8C2CC;
  --v5-ink:#17212B; --v5-ink-2:#3D4A56;
  --v5-muted:#52606D;
  --v5-teal:#1F4E45; --v5-teal-deep:#163B34;
  --v5-amber:#E39A2E; --v5-amber-deep:#B87716;
  --v5-amber-hover:#BB7A18;
  /* One face. No serif display, no dotted-zero mono. */
  --display:"Inter","Segoe UI","Helvetica Neue",Arial,system-ui,sans-serif;
  --editorial:"Inter","Segoe UI","Helvetica Neue",Arial,system-ui,sans-serif;
}

/* ---- paper ---------------------------------------------------------------
   Print pins light values whatever the toggle says. LAST in this file. */
@media print{
  :root,
  :root[data-theme="dark"],
  :root[data-theme="light"]{
    color-scheme:only light;
    --bg:#fff; --surface:#fff; --surface-2:#fff;
    --ink:#111; --ink-2:#333; --muted:#555;
    --line:#c9c9c9; --line-strong:#9a9a9a;
    --accent:#111; --accent-ink:#111; --accent-soft:transparent;
    --accent-deep:#111; --grad:none; --foil:#111; --foil-soft:transparent;
  }
}