/* ════════════════════════════════════════════════════════════════
   SuperCat Design System — Color primitives
   ────────────────────────────────────────────────────────────────
   Raw color scales. No meaning. Light theme = default, dark theme
   overrides at the bottom.

   Eight families:
     Paper   (warm cream surfaces) ......... 3 stops
     Ink     (text + dark UI)  ............. 5 stops
     Line    (hairline rules)  ............. 2 stops
     Crimson (brand primary)   ............. 3 stops
     Gold    (support accent)  ............. 2 stops
     Clay    (editorial accent)  ........... 1 stop
     Cream   (text on ink — deep)  ......... 1 stop
     Moss    (editorial good / OK)  ........ 2 stops
     + black / white pure tones

   Components should consume SEMANTIC tokens (--text-*, --surface-*,
   --action-*, --status-*) defined in semantic.css. Reach into these
   primitives directly only when no semantic name exists.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ── Paper · warm cream surfaces ──
     1 = canvas  2 = panel  3 = sunken */
  --color-paper-1:  #F5F2EC;
  --color-paper-2:  #EDE9E1;
  --color-paper-3:  #E5E0D6;

  /* ── Ink · text + dark UI ──
     1 = primary text  2 = strong  3 = body  4 = muted  5 = faint */
  --color-ink-1:    #1A1614;
  --color-ink-2:    #3D3532;
  --color-ink-3:    #5C5450;
  --color-ink-4:    #8A857D;
  --color-ink-5:    #B5B0A9;

  /* ── Line · hairline rules ──
     default = visible boundary  soft = decorative grid */
  --color-line:       rgba(26, 22, 20, 0.10);
  --color-line-soft:  rgba(26, 22, 20, 0.06);

  /* ── Crimson · brand primary ──
     base = brand color  d = pressed/hover-darker  l = tinted surface */
  --color-crimson:    #7A1218;
  --color-crimson-d:  #5C1215;
  --color-crimson-l:  #F2E2E2;

  /* ── Gold · support accent ──
     base = KEY tags, keylines  l = tinted surface */
  --color-gold:       #B97727;
  --color-gold-l:     #F5EDD8;

  /* ── Clay · editorial accent ── */
  --color-clay:       #9B7C60;

  /* ── Cream · text-on-ink (deep) ──
     Warm cream used as the foreground color on near-black surfaces
     (inverse footers, ink-tone stages, dark tooltips). Distinct from
     `--color-paper-1` (#F5F2EC, light surface) and from `--text-on-
     crimson` (#F5F2EC, cream against crimson buttons). This stop is
     a hair denser so it reads as "warm cream on ink", not "paper
     inside a panel". Replaces the legacy `--k-cream` in master.css. */
  --color-cream:      #EDE4D6;

  /* ── Moss · editorial good / OK ──
     Editorial deep green for tags and chart categorical "OK"
     readings. Distinct from `--status-success` (system status, more
     teal). Pairs with `--color-moss-soft` as the tinted background
     for `.ds-tag.ok` and similar one-off "approved" treatments.
     Replaces the legacy `--k-green` / `--k-green-l`. */
  --color-moss:       #2D4F2E;
  --color-moss-soft:  #EBF5EB;

  /* ── Pure ── */
  --color-white:      #FFFFFF;
  --color-black:      #000000;
}

[data-theme="dark"] {
  /* Surfaces — neutral with the faintest warmth.
     Page is very dim so inputs/cards stand out crisply. R is a hair
     above G & B (≤2pts) — enough to feel humane, not enough to
     read as brown/red. */
  --color-paper-1:  #131211;   /* page — deep, dim background */
  --color-paper-2:  #1F1E1C;   /* card / hero panel — clearly above page */
  --color-paper-3:  #2B2A27;   /* sunken / well */

  /* Text — warm off-white scale. Has more warmth than a neutral gray
     so dark-mode text reads as "cream on paper", not "silver on slate".
     Mirrors the warm-cream feel of paper-1 in light theme. */
  --color-ink-1:    #EBE6D7;
  --color-ink-2:    #CFCABC;
  --color-ink-3:    #A8A398;
  --color-ink-4:    #74706A;
  --color-ink-5:    #454340;

  --color-line:       rgba(235, 230, 215, 0.12);
  --color-line-soft:  rgba(235, 230, 215, 0.06);

  /* Crimson is lifted in dark mode — the locked-in #7A1218 reads too
     red / too vibrant against near-black surfaces. We shift it up the
     OKLCH lightness corridor (~10% toward white) so it lands at a
     dusty, confident crimson that still reads unmistakably as brand.
     Light theme keeps the deep #7A1218. */
  --color-crimson:    #8C2A2F;
  --color-crimson-d:  #6E1F23;
  --color-crimson-l:  rgba(140, 42, 47, 0.20);

  /* Gold + clay stay constant — they read fine on both surfaces. */

  /* Cream stays close (warm off-white that fades naturally against
     either ink surface). Moss lifts — the deep #2D4F2E reads almost
     black on near-black, so we shift up to a sage that holds the
     "OK / approved" semantic while staying legible. */
  --color-cream:      #EBE6D7;
  --color-moss:       #7DB87D;
  --color-moss-soft:  rgba(125, 184, 125, 0.18);
}