/* ==========================================================================
   TOKENS — THE SPACING SYSTEM (read this before touching any CSS)

   Tim's note on the mockup: "adjust the spacing settings by, like, a LOT.
   There are weird little mis-matches in terms of the way the character sheet
   fields are arranged, and it feels unnecessarily cramped in some other areas."

   The discipline that fixes it, and keeps it fixed:

   1. ONE SCALE. All gaps, paddings and margins come from --s1..--s7 below.
      No raw px/rem spacing values anywhere outside this file. If a component
      needs "a little more", it moves UP the scale — it does not invent 13px.

   2. FIXED FIELD HEIGHTS. Every interactive field/row is --field (44px touch)
      tall. --field-compact (36px) exists ONLY for dense desktop tables
      (the weapons grid at >=760px). Nothing else may use it.

   3. ONE LABEL. Every label on the sheet — identity keys, panel sub-heads,
      coin keys, medallion keys, persona keys, dock labels — is the .label
      class (defined in base.css from the --label-* tokens). One size, one
      tracking, one colour. Do not restyle labels per-section.

   4. ZERO INLINE STYLE ATTRIBUTES. This caused three real bugs in the mockup
      audits. Dynamic values (HP bar width) are set from JS as CSS custom
      properties (--fill/--ward-w), never as style="" strings in markup.

   5. SPACING COMES FROM PARENTS. Repeating rows get their rhythm from the
      parent's gap/padding, not per-element margin fudges. Every repeating
      row type (identity fields, save/skill rows, spell rows, gear rows,
      coin steppers, resource rows) is a .rowline grid variant sharing the
      same lead (44px) and tail (44px) column edges, so pips, dots and ✕
      buttons align in one vertical line down the whole sheet, and dotted
      rules start/end on the same column edges.

   Future agents: keep this discipline. A spacing bug is fixed by finding the
   token or grid template that is wrong, never by adding a local override.
   ========================================================================== */
:root{
  /* ---- the spacing scale ---- */
  --s1:4px;
  --s2:8px;
  --s3:12px;
  --s4:16px;
  --s5:24px;
  --s6:32px;
  --s7:48px;

  /* ---- field heights ---- */
  --field:44px;           /* every touch target and editable row */
  --field-compact:36px;   /* ONLY inside dense desktop tables */
  --field-chip:32px;      /* pips, counters, and other sub-row controls */
  --field-tall:64px;      /* two-line rows and stat plinths */

  /* ---- the type scale ----
     Added 2026-08-04. The sheet had drifted to FIFTY distinct font-size values
     across 226 declarations — twenty of them inside the 0.60–0.96rem band,
     some neighbours less than a third of a pixel apart. Individually invisible;
     collectively the reason sibling fields never looked like siblings.
     Every step is ~1.15–1.25× its neighbour. Add a step, never a one-off. */
  --fs-micro:.65rem;      /* 10.4px — pips, superscripts, dice-tray chrome */
  --fs-label:.75rem;      /* 12px   — THE label size; matches --label-size */
  --fs-small:.875rem;     /* 14px   — secondary values, table cells */
  --fs-body:1rem;         /* 16px   — body copy and primary values */
  --fs-lg:1.15rem;        /* 18.4px — sub-headings, emphasised values */
  --fs-xl:1.35rem;        /* 21.6px — section titles */
  --fs-2xl:1.6rem;        /* 25.6px — page titles, big stat numbers */
  --fs-3xl:2rem;          /* 32px   — the ability modifier orbs */

  /* ---- the radius scale ----
     Was eleven values across 159 declarations (2/3/4/5px were four different
     ways of saying "slightly rounded"). Four steps now. */
  --r-sm:3px;             /* chips, inputs, table cells */
  --r-md:8px;             /* cards and panels */
  --r-lg:12px;            /* modals and the largest surfaces */
  --r-pill:999px;         /* pills and circular controls */

  /* ---- the one label style ---- */
  --label-font:Cinzel,serif;
  --label-size:.75rem;
  --label-weight:600;
  --label-track:.08em;

  /* ---- shared layout ---- */
  --page-max:1080px;
  --pad:var(--s4);        /* panel padding — one value, every panel */
  --gap:var(--s3);        /* gap between panels/quires */
  --chrome-h:96px;

  /* ---- row grid shared edges ---- */
  --row-lead:44px;        /* pips / prep dots / attune toggles column */
  --row-tail:44px;        /* remove-✕ column */

  --font-body:"EB Garamond",Georgia,serif;
  --font-display:Cinzel,serif;
  --font-scribal:"IM Fell English",serif;
}
@media (min-width:760px){
  :root{ --pad:var(--s5); --gap:var(--s4); }
}

/* ---------- DAYLIGHT (default + forced light) ---------- */
:root,
:root[data-theme="light"]{
  color-scheme:light;
  --bg-0:#e6d5ae;
  --bg-1:#d8c294;
  --panel:#f4ead2;
  --panel-2:#ecdfc0;
  --ink:#33261a;
  /* ink-soft clears WCAG AA (4.5:1) on every surface in the sheet, page
     background included (bg-0 5.63, bg-1 4.69).
     ink-faint clears AA on the PANEL surfaces only (panel 5.19, panel-2 4.70,
     and the gold wash under .spell-desc 4.6). It does NOT clear AA on the bare
     page background (bg-0 4.29, bg-1 3.57) — an earlier version of this comment
     claimed it did. Body copy that sits straight on the page, with no panel
     under it, uses --ink-soft. See .login-sub/.picker-sub in layout.css. */
  --ink-soft:#5f4c36;
  --ink-faint:#735d45;
  /* lit-ember gold: goes DARKER in daylight so the lit state reads in both themes */
  --ember:#7e5c0e;
  --rule:#9c8058;
  --rule-soft:#c3ab7f;
  --gold:#a87e22;
  /* gold-deep carries small-caps micro-label TEXT. #7e5c0e measured 4.4:1 on
     the gold-washed panel-2 surface — under AA. This value clears 4.5:1 on
     every surface it sits on (panel 5.7, wash 4.9, bg-0 4.7). */
  --gold-deep:#755508;
  --gold-hi:#d9b45a;
  --rubric:#8e2f1e;
  --rubric-deep:#6e2114;
  --rubric-ink:#fdf3e0;
  --ward:#2e6560;
  --ward-hi:#4d8b84;
  --mend:#356029;
  --verdigris:#1f6b46;
  --verdigris-hi:#2f8f5f;
  --noise-o:.05;
  --noise-blend:multiply;
  --shadow:0 12px 26px -18px rgba(64,38,10,.6);
  --pip-glow:0 1px 2px rgba(64,38,10,.35);
  --seal-wax:#7e2617;
  --seal-wax-hi:#a4402a;
  /* display-time colour grade that harmonises a normal portrait with the wax seal
     (the stored file is untouched — this only tints what is painted) */
  --seal-grade:sepia(.42) saturate(1.2) contrast(1.02) brightness(1);
  --danger-a:#8e2f1e;
  --danger-b:#6e2114;
  --on-danger:#fdf3e0;
  --orb-num:#7e5c0e;
  --gold-btn-a:#8a6410;
  --gold-btn-b:#6b4d0a;
  --on-gold:#fdf3e0;
  --leather:#5a3d24;
  --leather-hi:#7d5734;
  --felt:#1f4536;
  --felt-hi:#2b5c48;

  /* ---- focus affordances ----
     These two were REFERENCED at routines.css:23, sections.css:40 and
     item-library.css:13 and DEFINED NOWHERE. An unresolvable var() inside
     `outline` invalidates the whole declaration, so those three rules computed
     to outline:none and outranked the global :focus-visible fallback — the
     routines checkbox is opacity:0, so a keyboard user got no focus signal at
     all. Defined here, in both themes, they resolve.

     --focus is the ring colour and deliberately aliases --gold-deep, the same
     ink base.css:89 uses for the global ring, so every focused control on the
     sheet rings in one gold. Ring vs its surfaces: panel 5.74, panel-2 5.19,
     bg-0 4.74 — all clear the 3:1 non-text minimum.

     --field-focus is the BACKGROUND wash on a focused input: gold warming the
     parchment under the nib. 1.25:1 against the unfocused panel and 1.16:1
     against the shared-item surface, where an unresolved var() left 1.01:1.
     Ink still reads 9.8:1 on it and --gold-deep 4.6:1. */
  --focus:var(--gold-deep);
  --field-focus:color-mix(in srgb, var(--gold) 22%, var(--panel));
}

/* ---------- CANDLELIGHT (system dark, unless light is forced) ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg-0:#1d150c;
    --bg-1:#120c06;
    --panel:#251b10;
    --panel-2:#2d2113;
    --ink:#ecdcb8;
    --ink-soft:#c9b28a;
    --ink-faint:#b8a180;
    --rule:#6f5734;
    --rule-soft:#4c3a20;
    --gold:#d3a13a;
    --gold-deep:#c29130;
    --gold-hi:#f0c96a;
    --ember:#f0c96a;
    --rubric:#e08157;
    --rubric-deep:#a5432a;
    --rubric-ink:#2a130a;
    --ward:#6fb4a5;
    --ward-hi:#8fd2c1;
    --mend:#8dba7f;
    --verdigris:#5fc08b;
    --verdigris-hi:#8ad9ac;
    --noise-o:.08;
    --noise-blend:overlay;
    --shadow:0 14px 30px -16px rgba(0,0,0,.8);
    --pip-glow:0 0 12px rgba(240,196,96,.35);
    --seal-wax:#8c3220;
    --seal-wax-hi:#b34e33;
    --seal-grade:sepia(.5) saturate(1.15) contrast(.98) brightness(.9);
    --danger-a:#a5432a;
    --danger-b:#7a2d1a;
    --on-danger:#fdf3e0;
    --orb-num:#f0c96a;
    --gold-btn-a:#d3a13a;
    --gold-btn-b:#c29130;
    --on-gold:#2a130a;
    --leather:#3a2716;
    --leather-hi:#57391f;
    --felt:#163026;
    --felt-hi:#1e4234;
    /* focus affordances — see the light block for why these exist.
       Ring vs surfaces: panel 5.94, panel-2 5.52, bg-0 6.34.
       Wash 18% (candlelight needs less gold to read): 1.39:1 vs the unfocused
       panel, 1.33:1 vs the shared-item surface; --ink 8.94:1 on it. */
    --focus:var(--gold-deep);
    --field-focus:color-mix(in srgb, var(--gold) 18%, var(--panel));
  }
}

/* ---------- CANDLELIGHT (forced dark) ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg-0:#1d150c;
  --bg-1:#120c06;
  --panel:#251b10;
  --panel-2:#2d2113;
  --ink:#ecdcb8;
  --ink-soft:#c9b28a;
  --ink-faint:#b8a180;
  --rule:#6f5734;
  --rule-soft:#4c3a20;
  --gold:#d3a13a;
  --gold-deep:#c29130;
  --gold-hi:#f0c96a;
  --ember:#f0c96a;
  --rubric:#e08157;
  --rubric-deep:#a5432a;
  --rubric-ink:#2a130a;
  --ward:#6fb4a5;
  --ward-hi:#8fd2c1;
  --mend:#8dba7f;
  --verdigris:#5fc08b;
  --verdigris-hi:#8ad9ac;
  --noise-o:.08;
  --noise-blend:overlay;
  --shadow:0 14px 30px -16px rgba(0,0,0,.8);
  --pip-glow:0 0 12px rgba(240,196,96,.35);
  --seal-wax:#8c3220;
  --seal-wax-hi:#b34e33;
  --seal-grade:sepia(.5) saturate(1.15) contrast(.98) brightness(.9);
  --danger-a:#a5432a;
  --danger-b:#7a2d1a;
  --on-danger:#fdf3e0;
  --orb-num:#f0c96a;
  --gold-btn-a:#d3a13a;
  --gold-btn-b:#c29130;
  --on-gold:#2a130a;
  --leather:#3a2716;
  --leather-hi:#57391f;
  --felt:#163026;
  --felt-hi:#1e4234;
  /* focus affordances — see the light block for why these exist. */
  --focus:var(--gold-deep);
  --field-focus:color-mix(in srgb, var(--gold) 18%, var(--panel));
}