/* ---------------------------------------------------------------------------
 * Revenu design tokens
 *
 * 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:#f8fafb;   /* row hover */
  --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;

  /* --- 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 */

  /* --- 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 */

  /* --- Type --------------------------------------------------------------- */
  --font:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --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 */
  --pad:24px;                /* wrap padding below 640px */
  --pad-lg:56px;             /* wrap padding from 640px */

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

/* Two keyframes exist. Do not add a third without a reason. */
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------------------------
 * 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.
 * ------------------------------------------------------------------------- */