/* ---------------------------------------------------------------------------
 * Revenu design tokens
 *
 * AUTHORED HERE. THIS IS THE SOURCE. Every other copy in the estate is written
 * from this file and carries a banner saying so:
 *
 *     tools/public/tokens.css
 *     client-requests/tokens.css
 *
 * To change a token: edit it here, see it on design.revenuagency.io, then run
 *
 *     ../mini-cto/starter/sync.sh --write
 *
 * which copies it out with a fresh Source-SHA256 and refuses any copy somebody
 * has edited in place.
 *
 * WHY HERE, FROM 22 SEPTEMBER 2026. It used to be `mini-cto/starter/tokens.css`,
 * and in practice it was nowhere: that file was listed in `starter/sync.sh` as
 * `tokens.css|-|`, a row with no destination, so it had never copied anything.
 * Three repos held byte-identical copies maintained by hand, and the one file a
 * person is most likely to want to change was the one file with no guard at all
 * -- `client-requests` had already drifted to a different hash without anyone
 * noticing. Pavlo's call was that this repo is the law of how things look and
 * work, so the palette is authored where it is documented and rendered, and
 * `starter/tokens.css` was deleted rather than left as a middle link nobody
 * reads. One fewer copy, not one more.
 *
 * Extracted from campaign-auditor/index.html, which carries the audience tool's
 * visual language. Documented in mini-cto/docs/design/30-design-law.md.
 *
 * DROP-IN SAFE. Every token that already exists in the live tools keeps its
 * exact name and value, so pasting this over an existing :root block changes
 * nothing visually. What it adds is names for the values that were previously
 * hardcoded: the data-table neutrals, the pill colours, and a few one-offs.
 *
 * The rule: use a token, never a literal. If you need a value that isn't here,
 * you are probably introducing an inconsistency. Check the design law first.
 * ------------------------------------------------------------------------- */

:root{
  /* --- Existing tokens: byte-identical to campaign-auditor and neggy -------
   * Do not change these values. They are shared across live tools. */
  --bg:#FCF7F5; --card:#ffffff; --ink:#1c1f1d; --ink-soft:#5b6361;
  --beige:#E8DFD2; --line:#E8DFD2;
  --accent:#2f7d6f; --accent-dark:#1f6155; --accent-soft:#d6e6e2; --accent-lite:#76A09C;
  --warn:#D8865A; --amber:#D8A14E; --bad:#C44536; --good:#2f7d6f;
  --shadow:0 1px 2px rgba(20,30,28,.04),0 6px 20px rgba(20,30,28,.05);
  --shadow-hover:0 2px 4px rgba(20,30,28,.05),0 12px 28px rgba(20,30,28,.08);
  --radius:18px;

  /* --- Data-table neutrals (NEW NAMES, same values) -----------------------
   * The second neutral family. Cool grey, used ONLY inside .cdtable and its
   * wrapper. The warm beige family above is for page chrome. Mixing them is
   * the most common way a new screen comes out subtly off-brand.
   * Previously hardcoded throughout the table CSS. */
  --tbl-line:#e6ebef;        /* wrapper border, header bottom border */
  --tbl-head-bg:#f4f6f8;     /* sticky header background */
  --tbl-head-ink:#5b6b76;    /* header text */
  --tbl-row-line:#eef1f4;    /* row separator */
  --tbl-row-hover:#edf2f6;   /* row hover. Was #f8fafb, a guess; neggy measured
                                this against the banded row, 5 Sep 2026 */
  --tbl-band:#f7f9fb;        /* every other row, where a table bands */
  --tbl-muted:#9aa7b0;       /* .muted cells: nulls, dashes, secondary text */

  /* --- Status pills (NEW NAMES, same values) ------------------------------
   * Verdicts are categorised with pills, never with shaded cell backgrounds.
   * Each tool maps its own vocabulary onto these in its BRANDING.md. */
  --pill-good-bg:#cdeee3;    --pill-good-ink:#1f6155;
  --pill-unsure-bg:#f6e7c9;  --pill-unsure-ink:#9a6f24;
  --pill-review-bg:#fae0cf;  --pill-review-ink:#b45a23;
  --pill-bad-bg:#f6d6cf;     --pill-bad-ink:#a3382b;
  --pill-slate-bg:#eef1f4;   --pill-slate-ink:#64748b;
  /* Neg names the same eight values by verdict. Aliases, so neither repo has
     to rename in the same PR; they go when neggy ports onto the kit. */
  --v-keep-bg:var(--pill-good-bg);     --v-keep-fg:var(--pill-good-ink);
  --v-unsure-bg:var(--pill-unsure-bg); --v-unsure-fg:var(--pill-unsure-ink);
  --v-negate-bg:var(--pill-bad-bg);    --v-negate-fg:var(--pill-bad-ink);
  --v-white-bg:var(--pill-slate-bg);   --v-white-fg:var(--pill-slate-ink);

  /* --- Greys and danger (NEW NAMES, same values) --------------------------
   * --disabled was #c2cbc8 in three separate places: disabled .run, the
   * .li-chip dot when off, and .pp-dot when unset. */
  --disabled:#c2cbc8;
  --danger-ink:#a3382b;      /* destructive text and .run.danger hover */
  --danger-line:#e3c2bb;     /* destructive button border */
  --danger-soft:#faf0ee;     /* destructive hover background */
  --scrim:rgba(28,31,29,.4); /* modal backdrop */
  --scrim-soft:rgba(28,31,29,.12); /* a popover's or drawer's lighter backdrop */
  /* A dialog's tier is carried by its backdrop (neggy, 5 Sep 2026): the wash
     warms for caution and reddens for danger, so the severity is read before
     the words are. The frame takes --warn / --bad as a hairline. */
  --scrim-caution:rgba(120,72,24,.40);
  --scrim-danger:rgba(120,32,24,.44);

  /* --- Caution: the third severity tier (neggy, 5 Sep 2026) ---------------
   * Plain is routine. Caution is a press that goes outward and can be taken
   * back: posting to a client's Slack, applying negatives. Danger removes work
   * or access. --warn (2.81:1 on white) stays the frame and wash; a button
   * needs 4.5, which is what --caution is. */
  --caution:#B2621A;         /* 4.51:1 on white */
  --caution-dark:#9A5416;    /* hover */

  /* --- A control's own boundary (tools, 12 Sep 2026) ----------------------
   * --beige is 1.32:1 on white: right for a card's edge, which is separated
   * by a shadow as well, and far too light for the one line that says "this
   * is a field you can type in or open". A control's border is furniture and
   * owes 3:1. Measured on both surfaces, because a select sits on a card and
   * on the page: 3.76:1 on --card, 3.54:1 on --bg.
   * BORDERS OF CONTROLS ONLY. A divider, a card edge and a table rule stay
   * --line; making every hairline this dark turns a calm page into a grid. */
  --line-strong:#8E8271;

  /* --- Skeletons: the cool-grey family, because a placeholder is data-shaped */
  --skel-bg:#eef1f4;
  --skel-shine:#f7f9fb;

  /* --- Radius ladder ------------------------------------------------------
   * Pick from these. Do not invent a new rung. --radius (18px) above is the
   * card default and stays named as it is for compatibility. */
  --r-xs:5px;                /* .colx and other tiny toggles */
  --r-sm:10px;               /* inputs, tiles, small buttons */
  --r-md:14px;               /* primary buttons */
  --r-tbl:16px;              /* table wrapper */
  --r-lg:20px;               /* modals, connect cards */
  --r-xl:24px;               /* empty-state cards */
  --r-pill:999px;            /* every pill, chip and round control */

  /* --- Controls (design law rules 20 and 21) ------------------------------
   * One height, declared once, referenced by every button, chip, dropdown and
   * text box. A primary is told apart from a dropdown by colour and weight,
   * never by being taller. 34px is neggy's measured value, approved 3 Sep 2026.
   * The front door's hero button is the one named exemption. */
  --ctl-h:34px;

  /* --- Spacing ladder -------------------------------------------------------
   * From the values already in use (4/8/12/16/24/32), snapped. Pick from these
   * for padding and gaps, the way radii pick from the ladder above. */
  --sp-xs:4px;
  --sp-sm:8px;
  --sp-md:12px;
  --sp-lg:16px;
  --sp-xl:24px;
  --sp-2xl:32px;

  /* --- Prose --------------------------------------------------------------- */
  --measure:66ch;            /* prose only: a paragraph, a note, an empty state.
                                Never a cell, a label, a value or a control. */

  /* --- Type --------------------------------------------------------------- */
  --font:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* IDENTIFIERS, and only identifiers: a form id, a board id, a token, a hash.
     Added 16 September 2026 because three files were already reading
     `var(--font-mono, ui-monospace, monospace)` from a token that existed
     nowhere, so every one of them silently fell through to its own inline
     fallback -- which is never-do rule 10's "two names for one idea" arriving
     by omission rather than by copy. The stack is the fallback they all
     carried, so nothing changes visually; it now has one home. */
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --fw-body:500;             /* body is 500, NOT 400 */
  --fw-semi:600;
  --fw-bold:700;
  --fw-heavy:800;            /* table headers, pills, card headings */

  /* --- Layout ------------------------------------------------------------- */
  --wrap:1180px;             /* standard content width */
  --wrap-wide:1298px;        /* table screens */
  --wrap-form:760px;         /* ONE COLUMN OF CONTROLS: a settings section, a
                                form, a single card a person reads top to
                                bottom. Not prose, so not --measure, which is
                                measured in ch and must not size a control.
                                Added 10 Sep 2026: Pavlo, on the requests
                                settings screen, "sections should have a width
                                limit (everywhere, really)". A switch and its
                                one-line description stretched across 1180px
                                puts the label and the control at opposite ends
                                of the screen, and nothing relates them. */
  --pad:24px;                /* wrap padding below 640px */
  --pad-lg:56px;             /* wrap padding from 640px */

  /* --- Motion ------------------------------------------------------------- */
  --t:.15s;                  /* every transition. Nothing is slower. */
}

/* Three keyframes exist. Do not add a fourth without a reason.
   shimmer is the skeleton's pulse (6 Sep 2026): an opacity swing, not a sweep,
   so it reads as "still loading" rather than as decoration. Honour
   prefers-reduced-motion wherever it is used. */
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{from{opacity:.55}to{opacity:1}}

/* ---------------------------------------------------------------------------
 * Migrating an existing tool
 *
 * Paste this over the tool's :root block, then replace literals with tokens as
 * you touch each area. Nothing breaks if you do it gradually, because every
 * pre-existing name and value is unchanged.
 *
 * The four fixes worth making first, all noted in the design law:
 *   1. .run and .li-signin hardcode #307773 / #265F5C. There are four teals in
 *      the file where there should be two. Use --accent and --accent-dark.
 *   2. .cdtable hardcodes the grey family. Use the --tbl-* tokens.
 *   3. .pill-* hardcode their colours. Use the --pill-* tokens.
 *   4. Radii are scattered across eleven values. Snap to the ladder.
 * ------------------------------------------------------------------------- */