/* ════════════════════════════════════════════════════════════════
   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 — near-neutral with the faintest warmth. R is a hair above G & B,
     enough to feel humane, not enough to read as brown. */
  --color-paper-1:  #141413;   /* page — deep, dim background */
  --color-paper-2:  #1F1E1D;   /* card / hero panel — clearly above page */
  --color-paper-3:  #2B2A28;   /* sunken / well */

  /* Text — near-white with a whisper of warmth, NOT cream. The old scale started
     at #EBE6D7, which is warm enough to read as dusty/yellow against a near-black
     page and made the whole theme feel muddy. This lands crisp while staying warm
     enough to belong to the same brand as the light theme's paper. */
  --color-ink-1:    #FAF9F5;
  --color-ink-2:    #C2C0B6;
  --color-ink-3:    #9C9A92;
  --color-ink-4:    #87867F;
  --color-ink-5:    #4D4C48;

  /* Lines derive from ink-1, so they inherit the same correction: a neutral hairline
     rather than a warm cream veil. */
  --color-line:       rgba(250, 249, 245, 0.12);
  --color-line-soft:  rgba(250, 249, 245, 0.06);

  /* ⚠️ DARK THEME: GOLD IS THE ACCENT. Light theme is untouched (crimson there).
     These vars still read "crimson" because button.css and most page CSS
     reference --color-crimson directly rather than --action-primary. Overriding
     here is what flips every accent surface at once. If we keep this direction,
     they want renaming to --color-accent-* — design-system work, not a page fix.

     Gold lifted from the brand #B97727, which reads muddy on near-black. */
  --color-crimson:    #D2A24C;   /* gold — the dark accent */
  --color-crimson-d:  #B8863A;
  --color-crimson-l:  rgba(210, 162, 76, 0.18);

  /* Real crimson, reserved for the final CTAs (Book a demo, Get started) and
     anywhere danger needs it. Applied to .kb-primary via a scoped override. */
  --color-crimson-true: #8C2A2F;

  /* Clay constant. --color-gold keeps the flat brand value for the logo mark. */

  /* Cream is a BRAND value (the logo on dark glass), not part of the text scale,
     so it keeps its warmth even though ink-1 no longer does. 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);
}