/* VibeAlchemy V2 — Design Tokens */
/* DEFAULT = dark (Molten Alchemy palette) */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Inter+Tight:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ─── Molten Alchemy palette (canonical) ─── */
  --obsidian:      #0C0A08;
  --obsidian-2:    #14110D;
  --charcoal:      #1A1610;
  --charcoal-2:    #221C14;
  --line-warm:     #2B241A;
  --line-warm-2:   #3A3023;
  --gold:          #F59E0B;
  --gold-hover:    #D97706;
  --gold-soft:     rgba(245, 158, 11, 0.12);
  --gold-line:     rgba(245, 158, 11, 0.28);
  --ember:         #DC2626;
  --ember-soft:    rgba(220, 38, 38, 0.14);
  --parchment:     #F5F0E8;
  --parchment-dim: #D9D3C8;
  --stone:         #78716C;
  --stone-dim:     #5A544F;
  --good:          #65A30D;
  --good-soft:     rgba(101, 163, 13, 0.14);
  --on-gold:       #1A1610;
  --shadow-color:  rgba(0, 0, 0, 0.6);

  /* ─── Mapped to existing token names so the rest of the app inherits ─── */
  /* Surface */
  --bg-primary:    var(--obsidian);
  --bg-secondary:  var(--obsidian-2);
  --bg-card:       var(--charcoal);
  --bg-panel:      var(--charcoal-2);

  /* Text */
  --text-primary:   var(--parchment);
  --text-secondary: var(--parchment-dim);
  --text-muted:     var(--stone);
  --text-accent:    var(--gold);

  /* Brand — gold */
  --accent:        var(--gold);
  --accent-hover:  var(--gold-hover);
  --accent-soft:   var(--gold-soft);
  --accent-border: var(--gold-line);

  /* Status */
  --color-success: #4ade80;
  --color-warning: var(--gold);
  --color-error:   var(--ember);

  /* Verdict tokens */
  --verdict-pass-color:      var(--color-success);
  --verdict-pass-bg:         rgba(74, 222, 128, 0.06);
  --verdict-pass-border:     rgba(74, 222, 128, 0.25);

  --verdict-realign-color:   var(--color-warning);
  --verdict-realign-bg:      rgba(245, 158, 11, 0.06);
  --verdict-realign-border:  rgba(245, 158, 11, 0.25);

  --verdict-pivot-color:     var(--color-warning);
  --verdict-pivot-bg:        rgba(245, 158, 11, 0.06);
  --verdict-pivot-border:    rgba(245, 158, 11, 0.25);

  --verdict-rethink-color:   var(--color-error);
  --verdict-rethink-bg:      rgba(248, 113, 113, 0.08);
  --verdict-rethink-border:  rgba(248, 113, 113, 0.30);

  /* Borders */
  --border:        var(--line-warm);
  --border-light:  var(--line-warm-2);
  --border-subtle: var(--line-warm);

  /* Short aliases used by molten component classes */
  --line:   var(--line-warm);
  --line-2: var(--line-warm-2);

  /* Glass / glow (used by existing components) */
  --glass-bg:      rgba(26, 22, 16, 0.8);
  --glass-blur:    12px;
  --glow-primary:  0 0 20px rgba(245, 158, 11, 0.3);

  /* Typography — Molten Alchemy stack
     --serif      → Instrument Serif (display): headings, pull-quotes, italic editorial moments
     --serif-body → Lora: long-form body copy, no italics, retains editorial vibe
     --sans       → Inter Tight: UI chrome, labels, dense data
     --mono       → JetBrains Mono: citations, code spans */
  --serif:      'Instrument Serif', Georgia, serif;
  --serif-body: 'Lora', Georgia, serif;
  --sans:       'Inter Tight', system-ui, sans-serif;
  --mono:       'JetBrains Mono', ui-monospace, monospace;

  /* Type scale — uniform sizes across the app.
     Use these instead of inline `fontSize: <N>` literals.
     Anything 32px+ (hero / verdict display) stays per-component. */
  --text-2xs: 10px;  /* tiny labels, mono captions */
  --text-xs:  11px;  /* small UI labels, buttons */
  --text-sm:  12px;  /* supporting text */
  --text-md:  14px;  /* body default (matches html/body baseline) */
  --text-lg:  16px;  /* emphasis body, subsection intro */
  --text-xl:  18px;  /* subsection headings */
  --text-2xl: 22px;  /* section titles */
  --text-3xl: 28px;  /* display */

  color-scheme: dark;
}

[data-theme="light"] {
  --bg-primary:    #f8f9fc;
  --bg-secondary:  #f1f3f9;
  --bg-card:       #ffffff;
  --bg-panel:      #f4f6fb;
  --text-primary:  #0f172a;
  --text-secondary:#475569;
  --text-muted:    #94a3b8;
  --text-accent:   #4f46e5;
  --accent:        #6366f1;
  --accent-hover:  #4f46e5;
  --accent-soft:   rgba(99, 102, 241, 0.08);
  --accent-border: rgba(99, 102, 241, 0.2);
  --border:        #e2e8f0;
  --border-light:  #cbd5e1;
  --border-subtle: #e2e8f0;
  --glass-bg:      rgba(255, 255, 255, 0.85);
  --glass-blur:    10px;
  --glow-primary:  0 4px 6px -1px rgba(99, 102, 241, 0.1);

  /* Light-mode semantic colors — deepened from the dark-mode Tailwind 400s
     to Tailwind 700s so they read as ink on cream paper, not neon. Every
     verdict / "what's working" / status colour in the app keys off these. */
  --color-success: #15803D;
  --color-warning: #B45309;
  --color-error:   #B91C1C;

  /* Light-mode verdict colors — keyed to the deepened semantic tokens above. */
  --verdict-pass-color:      #15803D;
  --verdict-pass-bg:         rgba(21, 128, 61, 0.10);
  --verdict-pass-border:     rgba(21, 128, 61, 0.30);

  --verdict-realign-color:   #B45309;
  --verdict-realign-bg:      rgba(180, 83, 9, 0.10);
  --verdict-realign-border:  rgba(180, 83, 9, 0.30);

  --verdict-pivot-color:     #B45309;
  --verdict-pivot-bg:        rgba(180, 83, 9, 0.10);
  --verdict-pivot-border:    rgba(180, 83, 9, 0.30);

  --verdict-rethink-color:   #B91C1C;
  --verdict-rethink-bg:      rgba(185, 28, 28, 0.10);
  --verdict-rethink-border:  rgba(185, 28, 28, 0.35);

  /* Palette overrides for light mode — molten components read these directly */
  --obsidian:   #F5F0E8;
  --obsidian-2: #EDE7DA;
  --charcoal:   #FAF6EF;
  --charcoal-2: #F1ECDF;
  --parchment:      #1A1610;
  --parchment-dim:  #4A4239;
  --stone:      #6E665A;
  --stone-dim:  #948A7A;
  --gold-soft:  rgba(217, 119, 6, 0.10);
  --gold-line:  rgba(217, 119, 6, 0.34);
  --ember-soft: rgba(220, 38, 38, 0.08);
  --good:       #3F6212;
  --good-soft:  rgba(63, 98, 18, 0.10);
  --on-gold:    #FBF7EF;
  --shadow-color: rgba(26, 22, 16, 0.18);

  /* Short aliases (light) */
  --line:   var(--border);
  --line-2: var(--border-light);

  color-scheme: light;
}