/* ════════════════════════════════════════════════════════════════
   KAL FOUNDRY · DESIGN TOKENS · v1.0
   Single source of truth. Drop this file into any app and reference
   the variables. Do not redefine values — only use them.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ── COLOR · OBSIDIAN (warm black substrate) ─────────────────── */
  --kf-obsidian-1000: #060504;
  --kf-obsidian-950:  #0A0907;  /* canvas / page background */
  --kf-obsidian-900:  #100E0B;  /* card / surface */
  --kf-obsidian-800:  #16130F;  /* raised surface */
  --kf-obsidian-700:  #1E1A14;  /* hover surface */
  --kf-obsidian-600:  #2A2419;
  --kf-obsidian-500:  #3A3122;
  --kf-obsidian-400:  #4E422E;
  --kf-obsidian-300:  #6A5B40;

  /* ── COLOR · BRASS (the mark — use sparingly) ────────────────── */
  --kf-brass-50:   #FAF1DD;
  --kf-brass-100:  #F1DFB1;
  --kf-brass-200:  #E5C988;
  --kf-brass-300:  #D9B569;   /* hover */
  --kf-brass-400:  #CDA458;   /* canonical brass — logo color */
  --kf-brass-500:  #B98E45;   /* pressed */
  --kf-brass-600:  #9A7434;
  --kf-brass-700:  #765828;
  --kf-brass-800:  #533E1D;
  --kf-brass-900:  #322512;

  /* ── COLOR · BONE (warm neutrals — text, light surfaces) ─────── */
  --kf-bone-50:  #F7F4EE;   /* primary text on dark */
  --kf-bone-100: #EDE7DA;
  --kf-bone-200: #D8CFBC;   /* secondary text on dark */
  --kf-bone-300: #B4A88E;
  --kf-bone-400: #8C8167;   /* tertiary text on dark */
  --kf-bone-500: #5E5644;
  --kf-bone-600: #3F3A2D;

  /* ── COLOR · FUNCTIONAL (forge-named) ────────────────────────── */
  --kf-ember:    #D85B3C;   /* danger / heat / destructive */
  --kf-crucible: #E8A33D;   /* warning / molten / pending */
  --kf-patina:   #6FA888;   /* success / cooled / complete */
  --kf-steel:    #6B8DA8;   /* info / cool / neutral status */

  /* ── SEMANTIC · DARK THEME (canonical) ───────────────────────── */
  --kf-bg:        var(--kf-obsidian-950);
  --kf-surface:   var(--kf-obsidian-900);
  --kf-surface-2: var(--kf-obsidian-800);
  --kf-surface-3: var(--kf-obsidian-700);
  --kf-hairline:        rgba(205, 164, 88, 0.14);
  --kf-hairline-strong: rgba(205, 164, 88, 0.28);
  --kf-ink:       var(--kf-bone-50);
  --kf-ink-2:     var(--kf-bone-200);
  --kf-ink-3:     var(--kf-bone-400);
  --kf-accent:    var(--kf-brass-400);
  --kf-accent-h:  var(--kf-brass-300);
  --kf-accent-a:  var(--kf-brass-500);

  /* ── TYPE · FAMILIES ─────────────────────────────────────────── */
  --kf-font:      'Space Grotesk', system-ui, -apple-system, sans-serif;
  --kf-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── TYPE · SCALE ────────────────────────────────────────────── */
  --kf-t-display: clamp(56px, 7.2vw, 112px);   /* 500 / 0.92 / -0.025em */
  --kf-t-h1:      clamp(40px, 4.4vw, 64px);    /* 500 / 1.0 / -0.015em */
  --kf-t-h2:      clamp(28px, 2.6vw, 36px);    /* 500 / 1.1 / -0.01em */
  --kf-t-h3:      20px;                         /* 500 / 1.3 / 0 */
  --kf-t-body:    16px;                         /* 400 / 1.6 / 0 */
  --kf-t-small:   14px;                         /* 400 / 1.5 / 0 */
  --kf-t-micro:   12px;                         /* mono · 0.18em · UPPER */

  /* ── GEOMETRY · CORNERS (sharp) ──────────────────────────────── */
  --kf-r-1:    2px;
  --kf-r-2:    4px;
  --kf-r-3:    6px;
  --kf-r-pill: 999px;   /* use only for status dots */

  /* ── SPACING · 4px BASE ──────────────────────────────────────── */
  --kf-s-1: 4px;
  --kf-s-2: 8px;
  --kf-s-3: 12px;
  --kf-s-4: 16px;
  --kf-s-5: 24px;
  --kf-s-6: 32px;
  --kf-s-7: 48px;
  --kf-s-8: 64px;
  --kf-s-9: 96px;

  /* ── BORDER ──────────────────────────────────────────────────── */
  --kf-border:        1px solid var(--kf-hairline);
  --kf-border-strong: 1px solid var(--kf-hairline-strong);
  --kf-border-accent: 1px solid var(--kf-accent);

  /* ── ELEVATION (used sparingly — only portals) ───────────────── */
  --kf-shadow-portal: 0 24px 60px rgba(0, 0, 0, 0.6),
                      0 2px 0 rgba(205, 164, 88, 0.12) inset;

  /* ── MOTION ──────────────────────────────────────────────────── */
  --kf-ease-stamp: cubic-bezier(.2, .8, .2, 1);
  --kf-ease-forge: cubic-bezier(.4, 0, .2, 1);
  --kf-d-fast: 120ms;   /* default · stamp · color/border shifts */
  --kf-d-base: 200ms;   /* panels · forge */
  --kf-d-slow: 360ms;   /* page transitions · pour */

  /* ── LAYOUT ──────────────────────────────────────────────────── */
  --kf-page-max:   1280px;
  --kf-page-pad:   clamp(20px, 4vw, 56px);
}

/* ── LIGHT THEME (use only for print / docs / inverse surfaces) ── */
[data-kf-theme="light"] {
  --kf-bg:        var(--kf-bone-50);
  --kf-surface:   #ffffff;
  --kf-surface-2: var(--kf-bone-100);
  --kf-surface-3: var(--kf-bone-200);
  --kf-hairline:        rgba(16, 14, 11, 0.10);
  --kf-hairline-strong: rgba(16, 14, 11, 0.22);
  --kf-ink:       var(--kf-obsidian-900);
  --kf-ink-2:     var(--kf-bone-600);
  --kf-ink-3:     var(--kf-bone-500);
}

/* ── REDUCED MOTION ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --kf-d-fast: 0ms;
    --kf-d-base: 0ms;
    --kf-d-slow: 0ms;
  }
}