/* ═══════════════════════════════════════════════════════════
   CLARIOR — Brand Tokens
   Source of truth for color, typography, spacing.
   Loads AFTER archetypes.tokens.css. Cascade-wins on aliases.

   Palette: Option 2 (Grounded) — Jerusalem stone + umber.
   Locked 2026-05-10 by Isaac.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Color: surfaces ──────────────────────────────── */
  --clarior-bg:           #e9e2d2;  /* page bg — stone */
  --clarior-bg-soft:      #f1ebdc;  /* card/surface on stone */
  --clarior-bg-deep:      #ddd4c0;  /* recessed surface, dividers area */
  --clarior-surface:      #ffffff;  /* pure white surface (modals, inputs) */

  /* ── Color: action ─────────────────────────────────── */
  --clarior-terra:        #7d3e20;  /* primary action — deep umber */
  --clarior-terra-hover:  #6a3319;  /* darker on hover */
  --clarior-terra-soft:   rgba(125, 62, 32, 0.08);  /* terra tint bg */
  --clarior-terra-line:   rgba(125, 62, 32, 0.32);  /* terra-toned border */

  /* ── Color: state ──────────────────────────────────── */
  --clarior-sage:         #3b6450;  /* selected/active state — forest */
  --clarior-sage-hover:   #2f5240;
  --clarior-sage-soft:    rgba(59, 100, 80, 0.08);
  --clarior-sage-line:    rgba(59, 100, 80, 0.28);

  /* ── Color: text ───────────────────────────────────── */
  --clarior-ink:          #131c1d;  /* primary text — near-black */
  --clarior-ink-2:        #2c3739;  /* body text */
  --clarior-ink-3:        #5a6669;  /* muted, labels */
  --clarior-ink-4:        #8a9598;  /* faint, placeholders */
  --clarior-ink-disabled: #b8c0c2;

  /* ── Color: lines ──────────────────────────────────── */
  --clarior-line:         rgba(19, 28, 29, 0.10);
  --clarior-line-strong:  rgba(19, 28, 29, 0.18);
  --clarior-line-faint:   rgba(19, 28, 29, 0.05);

  /* ── Color: semantic (warm-toned, never corporate) ──── */
  --clarior-success:      #4a7349;  /* warm green, sage-adjacent */
  --clarior-warning:      #b87a2a;  /* amber, terra-adjacent */
  --clarior-error:        #993828;  /* terra-leaning red */
  --clarior-error-bg:     color-mix(in srgb, var(--clarior-error) 8%, transparent);  /* light error tint */
  --clarior-info:         #4a6b78;  /* slate-blue, never corporate teal */

  /* ── Typography: families ──────────────────────────── */
  --clarior-display:      'Lora', Georgia, 'Times New Roman', serif;
  --clarior-body:         'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --clarior-display-he:   'Frank Ruhl Libre', 'David Libre', Georgia, serif;
  --clarior-body-he:      'Heebo', 'Assistant', system-ui, sans-serif;
  --clarior-mono:         ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, monospace;

  /* ── Typography: scale (mobile-first) ──────────────── */
  --clarior-text-xs:      11px;
  --clarior-text-sm:      13px;
  --clarior-text-base:    15px;
  --clarior-text-md:      17px;
  --clarior-text-lg:      20px;
  --clarior-text-xl:      24px;
  --clarior-text-2xl:     30px;
  --clarior-text-3xl:     38px;
  --clarior-text-display: clamp(32px, 5vw, 52px);

  /* ── Typography: line-heights ──────────────────────── */
  --clarior-lh-tight:     1.15;
  --clarior-lh-snug:      1.35;
  --clarior-lh-normal:    1.55;
  --clarior-lh-loose:     1.7;

  /* ── Typography: weights ───────────────────────────── */
  --clarior-w-regular:    400;
  --clarior-w-medium:     500;
  --clarior-w-semi:       600;
  --clarior-w-bold:       700;

  /* ── Typography: tracking ──────────────────────────── */
  --clarior-track-tight:  -0.01em;
  --clarior-track-normal: 0;
  --clarior-track-wide:   0.02em;   /* wordmark */
  --clarior-track-loose:  0.08em;   /* eyebrow labels, all-caps */

  /* ── Spacing scale (4px base) ──────────────────────── */
  --clarior-space-1:      4px;
  --clarior-space-2:      8px;
  --clarior-space-3:      12px;
  --clarior-space-4:      16px;
  --clarior-space-5:      24px;
  --clarior-space-6:      32px;
  --clarior-space-7:      48px;
  --clarior-space-8:      64px;
  --clarior-space-9:      96px;

  /* ── Radii ─────────────────────────────────────────── */
  --clarior-radius-sm:    6px;
  --clarior-radius-md:    10px;
  --clarior-radius-lg:    16px;
  --clarior-radius-pill:  999px;

  /* ── Shadows (low-key, never glowy) ────────────────── */
  --clarior-shadow-sm:    0 1px 2px rgba(19, 28, 29, 0.04);
  --clarior-shadow-md:    0 2px 8px rgba(19, 28, 29, 0.06), 0 1px 2px rgba(19, 28, 29, 0.04);
  --clarior-shadow-lg:    0 8px 24px rgba(19, 28, 29, 0.08), 0 2px 6px rgba(19, 28, 29, 0.04);

  /* ── Motion ────────────────────────────────────────── */
  --clarior-ease:         cubic-bezier(0.32, 0.72, 0, 1);
  --clarior-fast:         120ms;
  --clarior-base:         200ms;
  --clarior-slow:         320ms;
}

/* ─────────────────────────────────────────────────────────
   LEGACY ALIASES — point existing tokens at clarior values.
   Files that already use var(--sage), var(--warm), var(--slate)
   will rebrand automatically. The 133 hardcoded hex literals
   don't rebrand yet — that's the next sprint.
   ───────────────────────────────────────────────────────── */
:root {
  --terra:        var(--clarior-terra);
  --terra-hover:  var(--clarior-terra-hover);
  --sage:         var(--clarior-sage);
  --sage-hover:   var(--clarior-sage-hover);
  --sage-light:   var(--clarior-sage-soft);
  --warm:         var(--clarior-bg);
  --warm-soft:    var(--clarior-bg-soft);
  --warm-dark:    var(--clarior-bg-deep);
  --warm-deeper:  var(--clarior-bg-deep);
  --slate:        var(--clarior-ink);
  --slate-mid:    var(--clarior-ink-2);
  --muted:        var(--clarior-ink-3);
}

/* ─────────────────────────────────────────────────────────
   RTL — Hebrew gets the Hebrew families automatically.
   ───────────────────────────────────────────────────────── */
html[lang="he"],
[dir="rtl"] {
  --clarior-display: var(--clarior-display-he);
  --clarior-body:    var(--clarior-body-he);
}