/* GENERATED from packages/design-tokens — DO NOT EDIT. Run: make sync-tokens */
/* csplog design tokens — SINGLE SOURCE OF TRUTH.
 *
 * This is the only hand-edited copy. Per-app copies under
 * csp-dashboard/resources/css/ and csp-marketing/src/ are generated by
 * `make sync-tokens` (committed, but generated) — never edit those; CI fails
 * the build if they drift from this source.
 *
 * Colours are HSL *channel triplets* (e.g. `45 21% 7%`), NOT full colours.
 * Always consume them wrapped: `hsl(var(--ink))`. The triplet form is what
 * lets the dashboard's Tailwind setup apply opacity modifiers (`bg-pop/50`)
 * — see docs/adr/0016-shared-design-tokens.md.
 *
 * The contrast figure beside each colour is against --paper unless it says
 * otherwise. AA wants 4.5:1 for text and 3:1 for a boundary that carries
 * meaning on its own. Values below those are marked and are not text.
 */
:root {
  /* Brand palette */
  --paper:    42 25% 90%;     /* #EBE7DE  page background, surfaces */
  --paper-2:  42 33% 94%;     /* #F5F2EB  raised surface, cards on paper */
  --paper-3:  42 24% 84%;     /* #DFD9CB  hover and pressed ground */
  --ink:      45 21% 7%;      /* #17150F  text, borders  14.8:1 */
  --pop:      21 91% 47%;     /* #E4570B  fill, border, focus ring  3.0:1 — NEVER text on paper */
  --ok:       150 80% 24%;    /* #0C6E3D  success, health  5.1:1 (and paper on it, 5.1:1) */

  /* Extended palette */
  --ink-muted:    41 10% 32%;   /* #5A554A  muted body text on paper  6.0:1 */
  --muted-on-ink: 37 10% 57%;   /* #9C9487  muted text on ink surfaces  6.1:1 on ink */
  --hairline:     43 17% 75%;   /* #CBC5B6  divider on paper — a line, not a boundary */
  --pop-deep:     19 91% 41%;   /* #C9480A  hover state of a --pop fill */
  --pop-text:     20 94% 34%;   /* #A83C05  the only orange that may be TEXT on paper  5.1:1 */
  --pop-soft:     23 75% 87%;   /* #F7D9C6  tint behind ink text (a mark, a flagged row) */

  /* Code-block syntax. These sit on the ink ground (.code-block), where each
   * clears 7:1. No single colour can clear 4.5:1 on BOTH ink and paper — the
   * two grounds are 14.8:1 apart — so the light variants override all three
   * rather than sharing a value that fails on one of them. */
  --code-keyword: 250 45% 74%;  /* #A99FDB  directive name      7.5:1 on ink */
  --code-ok:      150 45% 58%;  /* #64C494  permitted source    8.6:1 on ink */
  --code-danger:  20 90% 64%;   /* #F68851  blocked source      7.4:1 on ink */
  /* The paper variant, for a directive name set on paper (the /learn tables
   * and glossary). --code-keyword is 2.0:1 there. */
  --code-keyword-paper: 250 35% 42%;  /* #524691  directive name on paper  6.5:1 */

  /* Typography.
   * Geist is a variable font: one woff2 covers 100-900, so any weight is free.
   * IBM Plex Mono ships 400/500/600 as separate files.
   * NOTE: these two stacks are duplicated in the second @theme block of
   * csp-dashboard/resources/css/app.css and must be changed together — the
   * comment there explains why Tailwind cannot read them from here. */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Radius — a 2px softening, just enough that an edge reads as drawn rather
   * than as a crop mark. Not a rounded UI. */
  --radius: 2px;

  /* Border rule — every brand border is a 1px hairline in ink */
  --rule-width: 1px;

  /* Motion. Two durations and one curve — the whole vocabulary.
   *
   * The rule the values enforce: interaction (hover, press, focus) is a colour
   * change and uses --motion-quick with the built-in `ease`; a *state change*
   * (a panel opening, an accordion, a pending action) may move, and uses
   * --motion-panel with --motion-ease. See DESIGN.md -> Motion.
   *
   * --motion-quick is also every closing transition: getting out of the way
   * must never take longer than arriving.
   *
   * The curve is Emil Kowalski's strong ease-out, not a hand-rolled one — the
   * built-in `ease-out` is too weak to read as deceleration at 200ms. Never
   * `ease-in` on an interface: it delays the exact moment being watched. */
  --motion-quick: 150ms;
  --motion-panel: 200ms;
  --motion-ease: cubic-bezier(0.23, 1, 0.32, 1);
}