/* 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. `218 24% 7%`), NOT full colours.
 * Always consume them wrapped: `hsl(var(--ink))`. The triplet form is what
 * lets the dashboard's shadcn/Tailwind setup apply opacity modifiers
 * (`bg-pop/50`) — see docs/adr/0016-shared-design-tokens.md.
 */
:root {
  /* Brand palette */
  --paper:    60 18% 98%;     /* #FAFAF7  page background, surfaces */
  --paper-2:  60 14% 93%;     /* #F2F2EC  secondary surface, hover */
  --ink:      218 24% 7%;     /* #0E1116  text, borders, primary */
  --pop:      14 100% 58%;    /* #FF5C2B  accent, CTAs, destructive */
  --ok:       150 86% 27%;    /* #0A8050  success, health */

  /* Extended palette (promoted from the marketing site) */
  --ink-muted:    218 5% 44%;   /* #6B6F76  muted body text on paper */
  --muted-on-ink: 214 8% 83%;   /* #CFD2D6  muted text on ink surfaces */
  --hairline:     60 9% 89%;    /* #E5E5E0  subtle divider on paper */
  --code-keyword: 251 27% 43%;  /* #5A4F8A  code-block directive */
  --code-ok:      133 47% 33%;  /* #2C7A3D  code-block ok token */
  --code-danger:  3 60% 47%;    /* #C03830  code-block danger token */

  /* Typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Radius — brutalist: sharp everywhere except the brand mark */
  --radius:        0px;
  --radius-block:  6px;

  /* Border rule — every brand border is 1.5px ink */
  --rule-width: 1.5px;

  /* Hard offset shadows (no blur) — the core of the aesthetic.
   * These reference --ink/--pop/--paper so they track dark-mode overrides. */
  --shadow-brutal:        4px 4px 0 hsl(var(--ink));
  --shadow-brutal-lg:     6px 6px 0 hsl(var(--ink));
  --shadow-brutal-pop:    4px 4px 0 hsl(var(--pop));
  --shadow-brutal-pop-lg: 6px 6px 0 hsl(var(--pop));
  --shadow-brutal-paper:  4px 4px 0 hsl(var(--paper));
}