/* ============================================================
   Ai vem o Vampiro — Sistema de temas
   3 direções visuais comutáveis via [data-theme]
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* -------- base tokens (shared across themes) -------- */
:root {
  --font-display:   'Cinzel', serif;
  --font-narrative: 'EB Garamond', serif;
  --font-ui:        'Space Grotesk', sans-serif;

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;

  --t-fast: 140ms cubic-bezier(.2,.7,.3,1);
  --t-med:  280ms cubic-bezier(.2,.7,.3,1);
  --t-slow: 600ms cubic-bezier(.2,.7,.3,1);

  --clan-brujah:   #b5322f;
  --clan-gangrel:  #7d6b3a;
  --clan-malkavian:#8a5bd6;
  --clan-nosferatu:#6f7d63;
  --clan-toreador: #c8607e;
  --clan-tremere:  #9a2230;
  --clan-ventrue:  #b89244;
}

/* ============================================================
   DIREÇÃO 1 — SANGUE & OURO
   ============================================================ */
[data-theme="gold"] {
  --bg-0: #0a0806;
  --bg-1: #141009;
  --bg-2: #1e1810;
  --bg-raised: #261d12;
  --line: #3a2c1a;
  --line-soft: #2a2013;

  --ink:      #ece0c8;
  --ink-soft: #b9a888;
  --ink-mute: #7e6f56;

  --accent:       #c9a24b;
  --accent-bright:#e6c878;
  --accent-dim:   #6b5526;
  --accent-rgb:   201, 162, 75;

  --blood:       #7c1a18;
  --blood-bright:#a82420;
  --blood-rgb:   124, 26, 24;

  --success: #d8b25a;
  --danger:  #b23a2a;

  --glow:        rgba(201, 162, 75, .14);
  --vignette:    radial-gradient(125% 100% at 50% 0%, transparent 35%, rgba(0,0,0,.6) 100%);
  --paper-tint:  rgba(201,162,75,.02);
  --narrator-name: var(--accent);
  --scene-ambient: radial-gradient(80% 60% at 50% -10%, rgba(201,162,75,.10), transparent 60%);
}

/* ============================================================
   DIREÇÃO 2 — VÉU OCULTO
   ============================================================ */
[data-theme="purple"] {
  --bg-0: #0b0712;
  --bg-1: #120c1f;
  --bg-2: #1a1129;
  --bg-raised: #221634;
  --line: #3a2956;
  --line-soft: #281a3d;

  --ink:      #e7ddf2;
  --ink-soft: #b6a4cf;
  --ink-mute: #7d6a96;

  --accent:       #9a63d8;
  --accent-bright:#c39bf0;
  --accent-dim:   #5a3a86;
  --accent-rgb:   154, 99, 216;

  --blood:       #7a1f3d;
  --blood-bright:#ad2e54;
  --blood-rgb:   122, 31, 61;

  --success: #6fd3c0;
  --danger:  #c2496b;

  --glow:        rgba(154, 99, 216, .16);
  --vignette:    radial-gradient(125% 100% at 50% 0%, transparent 32%, rgba(4,2,10,.7) 100%);
  --paper-tint:  rgba(154,99,216,.025);
  --narrator-name: var(--accent-bright);
  --scene-ambient: radial-gradient(80% 60% at 50% -10%, rgba(154,99,216,.14), transparent 60%);
}

/* ============================================================
   DIREÇÃO 3 — CARMESIM NOIR
   ============================================================ */
[data-theme="noir"] {
  --bg-0: #060607;
  --bg-1: #0d0d0f;
  --bg-2: #141417;
  --bg-raised: #1a1a1e;
  --line: #29292f;
  --line-soft: #1d1d22;

  --ink:      #ededf0;
  --ink-soft: #9a9aa3;
  --ink-mute: #5d5d66;

  --accent:       #d4302f;
  --accent-bright:#f24b46;
  --accent-dim:   #6e1b1a;
  --accent-rgb:   212, 48, 47;

  --blood:       #d4302f;
  --blood-bright:#f24b46;
  --blood-rgb:   212, 48, 47;

  --success: #cfcfd4;
  --danger:  #f24b46;

  --glow:        rgba(212, 48, 47, .12);
  --vignette:    radial-gradient(125% 100% at 50% 0%, transparent 40%, rgba(0,0,0,.78) 100%);
  --paper-tint:  rgba(255,255,255,.012);
  --narrator-name: var(--ink);
  --scene-ambient: radial-gradient(70% 50% at 50% -10%, rgba(212,48,47,.10), transparent 60%);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

#root { height: 100%; }

::selection { background: rgba(var(--accent-rgb), .3); color: var(--ink); }

::-webkit-scrollbar       { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 20px;
  border: 3px solid var(--bg-1);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }

button        { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input,textarea{ font-family: inherit; }

.eyebrow {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.cinzel   { font-family: var(--font-display); }
.smallcaps{ font-variant: small-caps; letter-spacing: .04em; }

.app-shell,.panel,.msg-bubble,.dice-card,.meter-fill,.clan-badge,.choice-chip {
  transition: background var(--t-med), color var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
}