/* ==========================================================================
   Design tokens — the single source of colour and type for the whole system.

   Extracted from design/palette.html. If a value here and a value there
   disagree, palette.html wins and this file gets fixed.

   No build step (design/11-tech-stack.md §3). These are plain custom
   properties; nothing compiles them.

   Two rules that are not negotiable:

   1. COLOUR NEVER CARRIES MEANING ALONE. Roughly 8% of men cannot separate
      red from green and the technicians are almost all men. Every status has
      a word beside it.
   2. STATUS AND PRIORITY NEVER SHARE A COLOUR VOCABULARY. Status is a soft
      chip. Priority is solid or outlined. They are different dimensions and
      must not be confusable.
   ========================================================================== */

:root {
  /* ── Type ──────────────────────────────────────────────────────────────
     System fonts only. A web font is a download the technician pays for on
     their own data (design/11 §6). */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Job numbers, site codes, invoice numbers, part codes. A reference the
     user reads back over the phone should be unambiguous — 0 and O, 1 and l —
     and should line up down a column. */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── Surfaces ──────────────────────────────────────────────────────────
     THREE PLANES, AND THEY HAVE TO BE FAR ENOUGH APART TO SEE.

     They were not. --page was #F4F6F8, the card was #FFFFFF and the tinted
     band under every card header and table header was #EDF0F3 — three values
     inside a 3% luminance range. A card did not sit on the page so much as
     dissolve into it, and a table header read as a slightly grubby row rather
     than a header. That is what "flat" was: not missing shadows, missing
     SEPARATION.

     ❗ The page could not simply be darkened, and this is the interesting
     part. --ink-3 on --page measured 4.8:1 against palette.html rule 5's
     4.5:1 floor, so every step down in the page grey ate the margin that
     docs/decisions/0026 had just been written to win back. #E9EEF4 with the
     OLD --ink-3 comes to 4.45:1 — under, by the same three percent as last
     time.

     So --ink-3 moved with it. Deepening the page and darkening the text are
     one change, not two, and they cannot be made separately.

       plane              value      role
       --page             #E9EEF4    the ground everything sits on
       --surface-2        #F1F4F8    tinted band: card and table headers
       --surface          #FFFFFF    the card itself, and every table row

     --surface-2 is new, and it exists so the band stops borrowing
     --line-soft. A hairline colour and a fill colour are different jobs; the
     day one wants adjusting the other came with it. */
  --page: #E9EEF4;
  --surface: #FFFFFF;
  --surface-2: #F1F4F8;

  /* Hairlines only now — the row rule, the card-header underline, the divider
     inside a group. Nothing is FILLED with these. */
  --line: #D3DBE3;
  --line-soft: #E4E9EE;

  /* ── Text ──────────────────────────────────────────────────────────────
     --ink is body text. 2, 3 and 4 step back in emphasis, never below the
     contrast a plant room in bad light needs.

     ⚠️ --ink-3 WAS #6E7A87, and palette.html's own swatch recorded it as
     4.4:1 — under the 4.5:1 that the same document sets as rule 5. It missed
     by 3%, so nothing failed obviously and everything failed slightly, on
     every page subtitle, field hint, table header and empty state in the
     system.

     ❗ And 4.4:1 was the FLATTERING figure: it is measured on white, and most
     of this colour sits on --page (4.0:1) or inside a neutral chip (3.8:1).
     #636E7A clears 4.5:1 on all three — white 5.2, page 4.8, chip 4.5.
     Measure a text colour against the darkest ground it actually lands on.

     ⚠️ --ink-4 carries NO text at all, at any size — palette.html rule 5, and
     it is 2.7:1. Hairlines, separators and disabled states only. The "Closed"
     status chip used to use it, at an effective 2.3:1.

     ⚠️ IT MOVED AGAIN, from #636E7A to #5F6A76, and NOT because 4.5:1 was
     wrong — because the ground under it changed. Deepening --page to #E9EEF4
     is what makes a card look like a card, and #636E7A on that page is
     4.45:1. Measured on the three grounds it actually lands on, #5F6A76 now
     reads white 5.5, page 4.7, chip 4.8.

     The rule this keeps re-teaching: a text colour is not a property of the
     text. It is a property of the PAIR, so it is not safe to change either
     half on its own.

     docs/decisions/0026. */
  --ink: #12161A;
  --ink-2: #455560;
  --ink-3: #5F6A76;
  --ink-4: #94A0AC;

  /* ── Brand ─────────────────────────────────────────────────────────────
     Navy. Used for chrome and primary actions, never to signal state. */
  --navy-100: #E8F0F8;
  --navy-200: #C3D6EC;
  --navy-500: #2C63A8;
  --navy-600: #22497F;
  --navy-700: #1B3A6B;
  --navy-900: #14294D;
  --blue-300: #739DD2;

  /* ── State ─────────────────────────────────────────────────────────────
     Each has a solid and a soft. Solid carries text on it; soft is a chip
     background. Always paired with a word. */
  --good: #0F7A3D;
  --good-soft: #E4F3EA;
  --info: #2C63A8;
  --info-soft: #E8F0F8;
  --warning: #9A6508;
  --warning-soft: #FBF0DC;
  --serious: #B4470E;
  --serious-soft: #FCEBE1;
  --critical: #B3261E;
  --critical-soft: #FBE9E7;
  --neutral: #6E7A87;
  --neutral-soft: #EDF0F3;

  /* ── Spacing ───────────────────────────────────────────────────────────
     A four-point scale. Enough steps to be useful, few enough to be learnt. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --radius: 6px;
  --radius-lg: 10px;

  /* ── Layout ────────────────────────────────────────────────────────────
     One width, used by the header, the page and the footer alike. When the
     header ignored it, the brand sat hard against the window edge while the
     content below started somewhere else, and the whole page read as
     misaligned — which it was. */
  --container: 1120px;
  --gutter: var(--space-5);

  /* Elevation, in TWO layers each: a tight contact shadow that says the edge
     is sitting on something, and a wide soft one that says how far above it.
     One layer at 4% did neither — at that alpha it was not a subtle shadow,
     it was an absent one, and the card was left doing all the separating with
     a hairline border.

     Still restrained. The coordinator wants a hundred rows, not a deck of
     floating cards (design/04 P3). */
  --shadow-1: 0 1px 1px rgba(18, 22, 26, 0.05),
              0 2px 5px -1px rgba(18, 22, 26, 0.06);
  --shadow-2: 0 1px 2px rgba(18, 22, 26, 0.06),
              0 10px 28px -8px rgba(18, 22, 26, 0.20);

  /* ── Touch ─────────────────────────────────────────────────────────────
     The technician is one-handed, sometimes gloved, on a roof. Nothing
     tappable is smaller than this (design/04 P4). */
  --touch-target: 44px;
}