/* ════════════════════════════════════════════════════════════════
   SuperCat Design System — Semantic tokens
   ────────────────────────────────────────────────────────────────
   Maps PRIMITIVE scales (color/space/etc) to MEANING.
   Components reference --text-*, --surface-*, --border-*
   instead of --color-ink-N directly.

   Also re-exports legacy --k-* names so existing pages keep working.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ── Surfaces ── */
  --surface-page:     var(--color-paper-1);   /* canvas */
  --surface-1:        var(--color-paper-1);   /* base */
  --surface-2:        var(--color-paper-2);   /* hero panel */
  --surface-3:        var(--color-paper-3);   /* sunken */
  --surface-card:     var(--color-white);     /* tile / card on cream */
  --surface-overlay:  rgba(26, 22, 20, 0.45); /* modal scrim */

  /* ── Text ── */
  --text-primary:     var(--color-ink-1);
  --text-strong:      var(--color-ink-2);
  --text-body:        var(--color-ink-3);
  --text-muted:       var(--color-ink-4);
  --text-faint:       var(--color-ink-5);
  /* Text/icon color when sitting ON TOP OF a crimson fill (primary
     button, danger banner, etc). Matches --color-paper-1 — the page
     canvas — so button labels read as "paper on crimson", visually
     tying the action back to the surface it sits on. Brighter than a
     muted off-white; cohesive with the warm-stone palette. Dark theme
     keeps the same hex (paper-1 only changes the page bg, not the
     "cream" identity). */
  --text-on-crimson:  #F5F2EC;
  --text-link:        var(--color-ink-1);
  --text-link-hover:  var(--color-crimson);
  /* Crimson tuned for use AS TEXT on dark surfaces (contrast AA).
     Light theme: same as brand crimson (no compromise).
     Dark theme: lifted in the dark-theme override block below. */
  --text-crimson:     var(--color-crimson);

  /* ── Borders ── */
  --border-subtle:    var(--color-line-soft);
  --border-default:   var(--color-line);
  --border-strong:    var(--color-ink-2);

  /* ── Brand / Action ── */
  --action-primary:        var(--color-crimson);
  --action-primary-hover:  var(--color-crimson-d);
  --action-primary-tint:   var(--color-crimson-l);

  /* ── Status ──
     CRITICAL: --status-danger MUST be visually distinct from
     --action-primary (crimson). Crimson is the brand's primary
     "yes/confirm" color — using the same hue for errors creates
     dangerous ambiguity. We use a warm orange-red for errors that
     reads as "wrong" but stays in the warm-earth palette. */
  --status-success: #2D6A4F;
  --status-warning: var(--color-gold);
  /* Error tone — aligned with brand crimson per design call.
     Same hue as destructive buttons (.kb-danger) so the
     'something is wrong' signal is consistent across the UI. */
  --status-danger:      var(--color-crimson);
  --status-danger-tint: var(--color-crimson-l);
  --status-info:    #2B5F87;

  /* ════════════════════════════════════════════════════════════════
     LEGACY ALIASES — keep --k-* names working
     ────────────────────────────────────────────────────────────────
     These map the old token namespace onto the new primitives.
     Do not add new --k-* tokens; consume primitives directly.
     ════════════════════════════════════════════════════════════════ */
  --k-paper:     var(--color-paper-1);
  --k-paper-2:   var(--color-paper-2);
  --k-paper-3:   var(--color-paper-3);
  --k-ink:       var(--color-ink-1);
  --k-ink-2:     var(--color-ink-2);
  --k-ink-3:     var(--color-ink-3);
  --k-ink-4:     var(--color-ink-4);
  --k-ink-5:     var(--color-ink-5);
  --k-line:      var(--color-line);
  --k-line-soft: var(--color-line-soft);
  --k-crimson:   var(--color-crimson);
  --k-crimson-d: var(--color-crimson-d);
  --k-crimson-l: var(--color-crimson-l);
  --k-gold:      var(--color-gold);
  --k-gold-l:    var(--color-gold-l);
  --k-clay:      var(--color-clay);
  --k-sans:      var(--font-sans);
  --k-mono:      var(--font-mono);
  --k-gutter:    var(--gutter);
  --k-max:       var(--container-max);
  --sc-font-sans: var(--font-sans);
  --sc-font-mono: var(--font-mono);
}

[data-theme="dark"] {
  --surface-card:    var(--color-paper-2);   /* darken card so it's not white in dark */
  --surface-overlay: rgba(0, 0, 0, 0.65);
  --border-strong:   var(--color-ink-2);
  /* Text-on-crimson WARMER on dark — sits on the lifted dusty crimson
     and matches the slightly warmer cream-ink palette in dark mode. */
  --text-on-crimson: #F5F2EC;

  /* Crimson tuned for use AS TEXT or BORDER on dark surfaces.
     Used by .kb-danger only — a warm-red lift of brand crimson
     that passes WCAG AA against #0F0D0C without going pink. */
  --text-crimson:    #B83A3F;

  /* Link hover color on dark — Ember 500 from Master DS palette.
     Independent of --text-crimson: links are about brand-primary
     emphasis, danger is about destructive intent. They MUST NOT
     share a value, even if the values look similar today. */
  --text-link-hover: #C25560;

  /* Error tone on dark — lifted crimson, matches .kb-danger text on dark.
     Same #B83A3F as --text-crimson: bright enough to pop on near-black,
     stays in the brand crimson family. */
  --status-danger:      #B83A3F;
  --status-danger-tint: rgba(184, 58, 63, 0.18);
}