/* ═══════════════════════════════════════════════════════════
   HISTORY VISUALIZER — Variables CSS (Palimpsesto Digital)
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Crimson+Pro:ital,wght@0,400;0,600;1,400;1,600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Backgrounds ─────────────────────────────────────────── */
  --bg-void:        #070504;
  --bg-deep:        #0e0b08;
  --bg-panel:       rgba(22, 14, 7, 0.88);
  --bg-card:        rgba(38, 24, 12, 0.60);
  --bg-hover:       rgba(217, 119, 6, 0.10);
  --bg-selected:    rgba(217, 119, 6, 0.18);

  /* ── Amber / Gold palette ────────────────────────────────── */
  --amber-bright:   #fbbf24;
  --amber-mid:      #d97706;
  --amber-deep:     #b45309;
  --amber-dark:     #78350f;
  --amber-glow:     rgba(251, 191, 36, 0.25);

  /* ── Sepia / Parchment text ──────────────────────────────── */
  --parchment:      #f5e6d3;
  --sepia-light:    #d4b896;
  --sepia-mid:      #a8937a;
  --sepia-muted:    #6b5444;
  --sepia-deep:     #3d2d1e;

  /* ── Accent colors (events/causality) ───────────────────── */
  --causal-red:     #dc2626;
  --causal-violet:  #7c3aed;
  --causal-cyan:    #0891b2;
  --influence-teal: #0d9488;
  --ally-green:     #16a34a;
  --conflict-red:   #b91c1c;
  --treaty-blue:    #2563eb;
  --neutral-gray:   #6b7280;

  /* ── Event severity ─────────────────────────────────────── */
  --sev-critical:   #ef4444;
  --sev-high:       #f97316;
  --sev-medium:     #eab308;
  --sev-low:        #84cc16;
  --sev-info:       #60a5fa;

  /* ── Era colors ──────────────────────────────────────────── */
  --era-1:          #d97706;  /* Pre-guerra */
  --era-2:          #dc2626;  /* Guerra activa */
  --era-3:          #7c3aed;  /* Ocupación */
  --era-4:          #0d9488;  /* Post-guerra */

  /* ── Actor type colors ───────────────────────────────────── */
  --actor-leader:   #fbbf24;
  --actor-military: #ef4444;
  --actor-naval:    #0891b2;
  --actor-political:#8b5cf6;
  --actor-economic: #16a34a;
  --actor-document: #a78bfa;
  --actor-battle:   #f97316;

  /* ── Glass / borders ─────────────────────────────────────── */
  --glass-border:   rgba(217, 119, 6, 0.20);
  --glass-border-hi:rgba(251, 191, 36, 0.40);
  --glass-blur:     14px;
  --divider:        rgba(168, 147, 122, 0.15);

  /* ── Typography ──────────────────────────────────────────── */
  --font-display:  'Cinzel', 'Times New Roman', serif;
  --font-body:     'Crimson Pro', 'Georgia', serif;
  --font-mono:     'JetBrains Mono', 'Courier New', monospace;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl:48px;

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  14px;
  --radius-xl:  20px;

  /* ── Shadows / Glow ──────────────────────────────────────── */
  --glow-amber:     0 0 20px rgba(217, 119, 6, 0.45), 0 0 40px rgba(217, 119, 6, 0.20);
  --glow-amber-sm:  0 0 8px rgba(217, 119, 6, 0.50);
  --glow-red:       0 0 16px rgba(220, 38, 38, 0.50);
  --shadow-panel:   0 8px 32px rgba(0, 0, 0, 0.60);
  --shadow-card:    0 2px 12px rgba(0, 0, 0, 0.40);

  /* ── Transitions ─────────────────────────────────────────── */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:       180ms;
  --dur-normal:     320ms;
  --dur-slow:       500ms;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: var(--bg-void);
  color: var(--parchment);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
}

/* ── Scrollbars ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
::-webkit-scrollbar-thumb { background: rgba(217,119,6,0.30); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(217,119,6,0.55); }

/* ── Utility ─────────────────────────────────────────────── */
.hidden { display: none !important; }
.mono   { font-family: var(--font-mono); font-size: 0.85em; }
.display{ font-family: var(--font-display); letter-spacing: 0.08em; }
.scrollable { overflow-y: auto; overflow-x: hidden; }
.text-amber   { color: var(--amber-mid); }
.text-sepia   { color: var(--sepia-mid); }
.text-parchment{ color: var(--parchment); }
.text-muted   { color: var(--sepia-muted); }