/* Hugin — design tokens (v0.4 — mead-hall: charcoal-forest + moss + ember) */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400..600&family=Lora:ital,wght@0,400..600;1,400..600&family=Geist:wght@300..700&family=Geist+Mono:wght@400..500&display=swap');

:root {
  /* ===== Type ===== */
  --font-display: 'Newsreader', 'Lora', Georgia, serif;
  --font-impact:  'Bebas Neue', Impact, 'Helvetica Neue Condensed', sans-serif;
  --font-body: 'Geist', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;

  /* Type scale */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-36: 36px;
  --fs-44: 44px;
  --fs-56: 56px;
  --fs-72: 72px;

  /* Display scale — Bebas Neue impact headlines. Fluid clamp() so heroes
     scale with viewport. fs-display-1 = page hero, fs-display-2 = section. */
  --fs-display-1: clamp(44px, 7vw, 88px);
  --fs-display-2: clamp(32px, 4.5vw, 56px);
  --fs-display-3: clamp(24px, 3vw, 36px);

  /* Spacing (4px grid) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-full: 999px;

  /* Shadows */
  --shadow-1: 0 1px 0 rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-2: 0 2px 4px rgba(0,0,0,0.10), 0 8px 24px rgba(0,0,0,0.12);
  --shadow-3: 0 8px 24px rgba(0,0,0,0.18), 0 24px 60px rgba(0,0,0,0.28);

  /* Accent — copper (default, more earthy than gold) */
  --accent: #A87C5A;
  --accent-soft: rgba(168, 124, 90, 0.14);
  --accent-line: rgba(168, 124, 90, 0.30);
  --accent-ink: #14110D;

  /* Status — forest-aligned */
  --status-running:   #A87C5A; /* copper */
  --status-queued:    #5C5E58; /* fog, dimmed */
  --status-completed: #5F7A5B; /* lichen — oxidized moss for cave dimness */
  --status-failed:    #8A4646; /* muted blood, deeper */

  /* Ember — warm secondary, atmospheric. Hearth glow, success moments,
     audio playing indicator, completed-saga warmth. Does NOT replace
     --accent (moss is brand); ember sits alongside as the warm voice. */
  --warm:        #C45B2E;
  --warm-ink:    #14110D;
  --warm-soft:   rgba(196, 91, 46, 0.14);
  --warm-line:   rgba(196, 91, 46, 0.30);
  --warm-glow:   rgba(196, 91, 46, 0.55);

  /* ===== Dark (default — Cave Hall) =====
     Lit by candle, not by daylight. Canvas sits near-black; --bg-elev
     lifts panels just enough to read as "on the table"; --bg-deep is
     the alcove behind us (sidebar, deepest wells). --ink is aged ivory
     that recedes — it whispers from the page, never shouts. */
  --bg:          #0E1110;
  --bg-elev:     #161A18;
  --bg-elev-2:   #1E221F;
  --bg-inset:    #07090A;
  --line:        rgba(207, 200, 182, 0.06);
  --line-strong: rgba(207, 200, 182, 0.14);
  --ink:         #CFC8B6;
  --ink-mute:    #8E8A7F;
  --ink-dim:     #5C5E58;
  --ink-faint:   rgba(207, 200, 182, 0.32);
  --selection:   rgba(95, 122, 91, 0.32);

  /* Cave depth wells — deeper than --bg. Sidebar alcove, modal scrims,
     transcript reading panels. The dark we sink into. */
  --bg-deep:     #050707;
  --bg-hearth:   #15100D; /* warm-tinted dark, panels around --warm accents */
  --bg-hearth-2: #1B1410; /* one step elevated, still warm */
}

/* Background tone variants (dark) */
[data-mode="dark"][data-bg="charcoal"] {
  --bg:        #16181A;
  --bg-elev:   #1F2124;
  --bg-elev-2: #282A2E;
  --bg-inset:  #0E1012;
}
[data-mode="dark"][data-bg="ink"] {
  --bg:        #0E1110;
  --bg-elev:   #181B1A;
  --bg-elev-2: #21241F;
  --bg-inset:  #07090A;
}

/* Accent variants */
[data-accent="copper"]   { --accent: #A87C5A; --accent-soft: rgba(168,124,90,0.14); --accent-line: rgba(168,124,90,0.30); }
[data-accent="bronze"]   { --accent: #A87C5A; --accent-soft: rgba(168,124,90,0.14); --accent-line: rgba(168,124,90,0.30); } /* alias for compat */
[data-accent="moss"]     { --accent: #5F7A5B; --accent-soft: rgba(95,122,91,0.14); --accent-line: rgba(95,122,91,0.30); }
[data-accent="rust"]     { --accent: #B26B47; --accent-soft: rgba(178,107,71,0.14);  --accent-line: rgba(178,107,71,0.30); }
[data-accent="amber"]    { --accent: #C89860; --accent-soft: rgba(200,152,96,0.14);  --accent-line: rgba(200,152,96,0.30); }

/* Font swap */
[data-font="newsreader"] { --font-display: 'Newsreader', 'Lora', Georgia, serif; }
[data-font="lora"]       { --font-display: 'Lora', 'Newsreader', Georgia, serif; }
[data-font="fraunces"]   { --font-display: 'Fraunces', 'Newsreader', Georgia, serif; }

/* ===== Base ===== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-15);
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11';
}

/* Cave vignette — single subtle candle falloff across the whole canvas.
   Fixed to viewport so it stays put while scrolling. Layered above the
   bg colour, no pseudo elements, no z-index concerns. Dark mode only. */
[data-mode="dark"] body {
  background:
    radial-gradient(ellipse 110% 80% at 50% 18%, transparent 38%, rgba(0,0,0,0.28) 88%, rgba(0,0,0,0.46) 100%) fixed,
    var(--bg);
}
@media (prefers-reduced-transparency: reduce) {
  [data-mode="dark"] body { background: var(--bg); }
}
::selection { background: var(--selection); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--ink);
}
h1 { font-size: var(--fs-56); line-height: 1.08; letter-spacing: -0.015em; }
h2 { font-size: var(--fs-36); line-height: 1.15; letter-spacing: -0.01em; }
h3 { font-size: var(--fs-24); line-height: 1.25; }
h4 { font-size: var(--fs-18); line-height: 1.35; font-weight: 600; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-display); }

/* Impact display — Bebas Neue, for hero headlines and ceremonial section
   titles. Opt-in via .impact class so existing h1/h2 stay Newsreader. */
.impact {
  font-family: var(--font-impact);
  font-weight: 400; /* Bebas Neue is only regular weight */
  letter-spacing: 0.01em;
  line-height: 1;
}
.impact-1 { font-size: var(--fs-display-1); }
.impact-2 { font-size: var(--fs-display-2); }
.impact-3 { font-size: var(--fs-display-3); }
.dim { color: var(--ink-dim); }
.mute { color: var(--ink-mute); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.rune {
  font-family: 'Noto Sans Runic', var(--font-display), serif;
  font-feature-settings: normal;
}
.hairline {
  height: 1px;
  background: var(--line);
  width: 100%;
}

/* Rune density */
[data-runes="subtle"]   .rune-deco { opacity: 0; pointer-events: none; }
[data-runes="balanced"] .rune-deco { opacity: 0.55; }
[data-runes="bold"]     .rune-deco { opacity: 1; }
[data-runes="bold"]     .rune-amp  { letter-spacing: 0.3em; }