/* ============================================================
   Storyteller App — Design Tokens
   Vampire: Dark Ages — Premium Dark Gothic Theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  /* ── Plan B Gothic Tokens & Accessibility Scale ─────────────── */
  --blood-900: #3a0d0d;
  --blood-700: #6b1414;
  --blood-500: #8b0000;
  --blood-300: #c1440e;

  --ash-950:   #0d0b0c;
  --ash-900:   #141112;
  --ash-700:   #2a2426;
  --ash-300:   #8b8285;

  --gold-400:  #c9a227;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px;

  --t-xs: 12px;  --t-sm: 14px; --t-base: 16px;
  --t-lg: 20px;  --t-xl: 28px; --t-2xl: 40px;

  --radius: 6px;
  --focus: 0 0 0 2px var(--gold-400);

  /* ── Legacy Aliases & Compatibility Fallbacks ─────────────── */
  --c-primary:        var(--c-red-500);
  --c-primary-dim:    var(--c-red-700);
  --c-bg-surface:     var(--c-bg-500);
  --c-bg-panel:       var(--c-bg-700);
  --radius-lg:        var(--r-lg, 12px);
  --radius-md:        var(--r-md, 8px);
  --radius-sm:        var(--r-sm, 4px);
  --c-accent-main:    var(--c-gold-500);
  --c-border:         var(--c-border-medium);
  --c-border-hover:   hsl(240, 6%, 30%);
  --c-text-body:      var(--c-text-secondary);
  --c-danger:         var(--c-red-500);

  /* ── Color Palette ─────────────────────────────────────── */

  /* Backgrounds */
  --c-bg-900:    hsl(0, 0%, 3%);    /* deepest obsidian black */
  --c-bg-800:    hsl(0, 0%, 5%);    /* main body bg */
  --c-bg-700:    hsl(0, 0%, 6%);    /* panel bg */
  --c-bg-600:    hsl(0, 0%, 8%);    /* sidebar / topbar */
  --c-bg-500:    hsl(240, 5%, 17%);   /* card surface */
  --c-bg-400:    hsl(240, 4%, 22%);   /* input surface */

  /* Borders */
  --c-border-strong:  hsl(0, 50%, 18%);  /* red-tinted dark borders */
  --c-border-medium:  hsl(240, 6%, 20%); /* neutral borders */
  --c-border-subtle:  hsl(240, 5%, 14%); /* very subtle separators */

  /* Primary — Crimson/Blood */
  --c-red-900:   hsl(0, 80%, 15%);
  --c-red-700:   hsl(0, 80%, 22%);
  --c-red-500:   hsl(0, 85%, 45%);    /* fresh blood accent */
  --c-red-400:   hsl(0, 72%, 45%);
  --c-red-300:   hsl(0, 68%, 65%);
  --c-red-200:   hsl(0, 65%, 75%);
  --c-red-100:   hsl(0, 60%, 88%);

  /* Gold — Storyteller authority */
  --c-gold-700:  hsl(43, 90%, 32%);
  --c-gold-600:  hsl(43, 90%, 40%);
  --c-gold-500:  hsl(43, 90%, 48%);
  --c-gold-400:  hsl(43, 90%, 60%);
  --c-gold-300:  hsl(43, 85%, 73%);

  /* Amber — Knowledge Catalog. Referenced by layout.css since the catalog was built,
     but never defined, so those rules were silently dropped by the parser. */
  --c-amber-500: hsl(38, 92%, 50%);
  --c-amber-900: hsl(38, 85%, 18%);

  /* Neutrals and one-off accents (B/2.2 token audit).
     These were raw hex literals scattered through layout/components/combat.css.
     Values are the exact HSL equivalents of what was there, so the audit is a
     refactor with no visual change -- not a re-theme. */
  --c-white:          hsl(0, 0%, 100%);    /* was #fff -- label on filled buttons */
  --c-black:          hsl(0, 0%, 0%);      /* was #000000 -- backdrop outer stop */
  --c-neutral-200:    hsl(0, 0%, 80%);     /* was #ccc -- pill button label */
  --c-parchment:      hsl(40, 50%, 88.24%);   /* was #f0e6d2 -- login text, autofill */
  --c-backdrop-inner: hsl(0, 52.94%, 6.67%);     /* was #1a0808 -- login radial centre */
  --c-backdrop-outer: hsl(0, 45.45%, 2.16%);     /* was #080303 -- login radial edge */
  --c-purple-600:     hsl(282.14, 67.87%, 37.84%);  /* was #7b1fa2 -- active catalog pill */
  --c-purple-300:     hsl(291.25, 46.6%, 59.61%);  /* was #ba68c8 -- its border */

  /* Text */
  --c-text-primary:   hsl(30, 15%, 92%);   /* warm off-white */
  --c-text-secondary: hsl(30, 10%, 65%);
  --c-text-muted:     hsl(240, 8%, 60%);
  --c-text-disabled:  hsl(240, 5%, 30%);

  /* Agent Colors */
  --c-agent-storyteller:  hsl(271, 55%, 55%);
  --c-agent-tactician:    hsl(0,  78%, 52%);
  --c-agent-rules:        hsl(208, 80%, 54%);
  --c-agent-disciplines:  hsl(340, 72%, 48%);
  --c-agent-lorekeeper:   hsl(142, 55%, 40%);
  --c-agent-npc:          hsl(32,  90%, 50%);

  /* Agent glow versions */
  --c-agent-storyteller-glow:  hsla(271, 55%, 55%, 0.35);
  --c-agent-tactician-glow:    hsla(0,  78%, 52%, 0.35);
  --c-agent-rules-glow:        hsla(208, 80%, 54%, 0.35);
  --c-agent-disciplines-glow:  hsla(340, 72%, 48%, 0.35);
  --c-agent-lorekeeper-glow:   hsla(142, 55%, 40%, 0.35);
  --c-agent-npc-glow:          hsla(32,  90%, 50%, 0.35);

  /* Role Colors */
  --c-role-player:      hsl(0, 72%, 45%);
  --c-role-storyteller: hsl(43, 90%, 50%);

  /* Combat State Colors */
  --c-combat-active:    hsl(0, 100%, 62%);   /* glowing red — active turn */
  --c-combat-declared:  hsl(43, 95%, 55%);   /* amber — action declared */
  --c-combat-waiting:   hsl(240, 8%, 38%);   /* muted — waiting */
  --c-combat-done:      hsl(142, 40%, 32%);  /* green — turn resolved */

  /* Success / Warning / Error */
  --c-success: hsl(142, 55%, 40%);
  --c-warning: hsl(43, 90%, 50%);
  --c-error:   hsl(0, 72%, 50%);

  /* ── Typography ────────────────────────────────────────── */
  --font-heading:  'Cinzel', 'Georgia', serif;
  --font-body:     'Outfit', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'Consolas', monospace;

  --text-xs:   0.7rem;
  --text-sm:   0.8rem;
  --text-base: 0.9rem;
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;

  /* ── Spacing Scale (4px base in rem) ───────────────────── */
  --sp-0:  0rem;
  --sp-1:  0.25rem;  /* 4px */
  --sp-2:  0.5rem;   /* 8px */
  --sp-3:  0.75rem;  /* 12px */
  --sp-4:  1rem;     /* 16px */
  --sp-5:  1.25rem;  /* 20px */
  --sp-6:  1.5rem;   /* 24px */
  --sp-8:  2rem;     /* 32px */
  --sp-10: 2.5rem;   /* 40px */
  --sp-12: 3rem;     /* 48px */
  --sp-16: 4rem;     /* 64px */
  --sp-20: 5rem;     /* 80px */

  /* ── Border Radius ─────────────────────────────────────── */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 9999px;

  /* ✨ Glassmorphism / Blur ✨ */
  --blur-md: blur(12px);
  --glass-bg: rgba(15, 8, 8, 0.7);
  --glass-blur: blur(10px);
  --glass-border: 1px solid rgba(255, 80, 80, 0.15);

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.6);
  --shadow-lg:      0 8px 24px rgba(0,0,0,0.8);
  --shadow-xl:      0 16px 48px rgba(0,0,0,0.9);
  --shadow-red:     0 0 12px hsla(0, 80%, 35%, 0.6), 0 0 24px hsla(0, 80%, 25%, 0.3);
  --shadow-gold:    0 0 12px hsla(43, 90%, 48%, 0.5), 0 0 24px hsla(43, 90%, 35%, 0.25);
  --shadow-purple:  0 0 12px hsla(271, 55%, 45%, 0.5), 0 0 24px hsla(271, 55%, 35%, 0.25);
  --shadow-combat:  0 0 20px hsla(0, 100%, 50%, 0.4), 0 0 40px hsla(0, 100%, 40%, 0.2);

  /* ── Z-index Layers ────────────────────────────────────── */
  --z-base:     1;
  --z-sidebar:  10;
  --z-topbar:   20;
  --z-agent-hud: 25;
  --z-floating: 30;
  --z-drawer:   40;
  --z-modal:    50;
  --z-overlay:  60;
  --z-toast:    70;
  --z-tooltip:  80;

  /* ── Layout ────────────────────────────────────────────── */
  --topbar-h:        3.5rem;   /* 56px */
  --sidebar-w:       16.25rem; /* 260px */
  --right-sidebar-w: 32.5rem;  /* 520px */
  --agent-hud-h:     3.5rem;   /* 56px */
  --chat-h:          15rem;    /* 240px */
  --combat-feed-h:   12.5rem;  /* 200px */
  --mobile-nav-h:    3.75rem;  /* 60px */

  /* ── Animation ─────────────────────────────────────────── */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-quart:  cubic-bezier(0.5, 0, 0.75, 0);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:    cubic-bezier(0.4, 0, 0.2, 1);

  --dur-instant:   80ms;
  --dur-fast:      150ms;
  --dur-normal:    280ms;
  --dur-slow:      450ms;
  --dur-very-slow: 700ms;
}