/* Design Tokens — Samuel Salzer
 * Canonical source of truth for the visual design system.
 * See ~/.claude/context/design-system.md for full guidelines.
 *
 * Usage:
 *   Static projects: <link rel="stylesheet" href="/design-tokens.css">
 *   Generated output: embed these variables in <style> blocks
 *   Frameworks: map these values to your theme config
 */

:root {
  /* ── Palette ── */
  --bg: #f5f3ef;
  --fg: #1a1a1a;
  --muted: #8a8580;
  --card: #faf9f7;
  --border: #1a1a1a;
  --hover-bg: #f0eee9;
  --inverse-text: #faf9f7;
  --overlay: rgba(26, 26, 26, 0.5);

  /* ── Semantic ── */
  --success: #6B7C6E;
  --danger: #B85C4D;
  --warning: #B87333;
  --info: #3a7bd4;

  /* ── Mood (gradient: critical → low → good → peak) ── */
  --mood-critical: #c0392b;
  --mood-low: #d4753a;
  --mood-good: #7d9b76;
  --mood-peak: #4a7c59;

  /* ── Agent Accents ── */
  --accent-chiron: #4a9e6a;
  --accent-borges: #8a7560;
  --accent-janus: #3a7bd4;
  --accent-genos: #7c6bbf;
  --accent-midas: #c9a03a;
  --accent-saber: #c5506a;
  --accent-sisyphus: #8a6bbf;
  --accent-william-james: #5a8a6b;
  --accent-hammurabi: #6b6b8a;
  --accent-phoenix: #c55a5a;
  --accent-prometheus: #8a7a3a;
  --accent-evelyn: #3ab4b4;
  --accent-saitama: #6b4a8a;
  --accent-hermes: #3a8ad4;
  --accent-freya: #c4956a;
  --accent-default: #d4753a;

  /* ── Typography ── */
  --font-mono: 'DepartureMono', 'SF Mono', 'Fira Code', monospace;
  --font-sans: 'Geist', system-ui, sans-serif;
  --font-serif: 'Fraunces', 'Instrument Serif', Georgia, serif;

  --text-body: 13px;
  --text-label: 10px;
  --text-heading: 16px;
  --text-stat: 18px;

  --tracking-label: 0.12em;
  --tracking-heading: 0.08em;
  --tracking-stat: -0.02em;

  /* ── Shadows (retro/hard style) ── */
  --shadow-hard: 3px 3px 0 var(--border);
  --shadow-hard-accent: 3px 3px 0 var(--accent, var(--accent-default));
  --shadow-hard-lg: 5px 5px 0 var(--border);
  --shadow-hard-accent-lg: 5px 5px 0 var(--accent, var(--accent-default));
  --shadow-hard-inset: inset 3px 3px 0 rgba(26, 26, 26, 0.08);
  --shadow-hard-double: 2px 2px 0 var(--accent, var(--accent-default)), 5px 5px 0 var(--border);
  --shadow-subtle: 0 2px 6px rgba(26, 26, 26, 0.06);

  /* ── Borders ── */
  --border-warm: #222218;
  --border-hard: 1px solid var(--border);
  --border-soft: 1px solid rgba(26, 26, 26, 0.08);

  /* ── Glow ── */
  --glow-warm: #FEF9C9;

  /* ── Spacing ── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 56px;
  --max-content: 1120px;

  /* ── Motion ── */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
}