/*
 * Tema de SpookFact: variables CSS por tema y modo.
 * Tema base: purple (claro y oscuro). El modo se controla con
 * data-mode en <html> y se persiste en localStorage (core.js).
 * Convencion: [data-theme="purple"][data-mode="light|dark"].
 */

[data-theme='purple'][data-mode='light'] {
  --bg: #f7f5fa;
  --surface: #ffffff;
  --surface-2: #f1edf7;
  --surface-3: #e4def0;
  --border: #e4def0;
  --border-strong: #cfc6e3;
  --hover: #f1edf7;

  --accent: #7c3aed;
  --accent-hover: #6d28d9;
  --accent-2: #6366f1;
  --accent-2-hover: #4f46e5;
  --accent-glow: rgba(124, 58, 237, 0.14);
  --accent-bg: rgba(124, 58, 237, 0.1);
  --accent-2-glow: rgba(99, 102, 241, 0.12);

  --text: #1e1b2e;
  --text-2: #675e7d;
  --text-3: #9992ac;
  --text-inverse: #ffffff;

  --success: #16a34a;
  --warning: #f59e0b;
  --error: #dc2626;
  --info: #6366f1;

  --font-display: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 40px;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-panel: 0 12px 32px rgba(15, 23, 42, 0.12);
  --shadow-btn: 0 4px 18px rgba(124, 58, 237, 0.24);

  --gradient-cta: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);

  --nav-height: 64px;
  --sidebar-width: 250px;
  --sidebar-collapsed-width: 60px;
  --header-height: 60px;
  --modal-overlay: rgba(15, 23, 42, 0.55);

  --sidebar-shell: linear-gradient(180deg, #fbf8fe 0%, #f5f2fb 18%, #f8f7fb 100%);
  --sidebar-header-bg: #ffffff;
  --sidebar-brand-surface: #ffffff;
  --sidebar-body-bg: #f1edf7;
  --sidebar-footer-bg: #f8f7fb;
  --sidebar-track: rgba(30, 41, 59, 0.1);
  --sidebar-item-text: #1e1b2e;
  --sidebar-item-hover: rgba(15, 23, 42, 0.05);
  --sidebar-item-active: rgba(124, 58, 237, 0.15);
  --sidebar-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}

[data-theme='purple'][data-mode='dark'] {
  --bg: #17141f;
  --surface: #211d2e;
  --surface-2: #1c1926;
  --surface-3: #322c42;
  --border: #322c42;
  --border-strong: #423a56;
  --hover: #322c42;

  --accent: #8b5cf6;
  --accent-hover: #a78bfa;
  --accent-2: #6366f1;
  --accent-2-hover: #818cf8;
  --accent-glow: rgba(139, 92, 246, 0.18);
  --accent-bg: rgba(139, 92, 246, 0.14);
  --accent-2-glow: rgba(99, 102, 241, 0.16);

  --text: #ece9f5;
  --text-2: #a79fbd;
  --text-3: #756b8c;
  --text-inverse: #17141f;

  --success: #4ade80;
  --warning: #fb923c;
  --error: #f87171;
  --info: #818cf8;

  --font-display: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 40px;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-panel: 0 16px 36px rgba(0, 0, 0, 0.35);
  --shadow-btn: 0 4px 18px rgba(139, 92, 246, 0.28);

  --gradient-cta: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);

  --nav-height: 64px;
  --sidebar-width: 250px;
  --sidebar-collapsed-width: 60px;
  --header-height: 60px;
  --modal-overlay: rgba(0, 0, 0, 0.78);

  --sidebar-shell: linear-gradient(180deg, #17141f 0%, #1c1826 18%, #1a1720 100%);
  --sidebar-header-bg: #211d2e;
  --sidebar-brand-surface: #2a2438;
  --sidebar-body-bg: #17141f;
  --sidebar-footer-bg: #1a1620;
  --sidebar-track: rgba(236, 233, 245, 0.12);
  --sidebar-item-text: #ece9f5;
  --sidebar-item-hover: rgba(255, 255, 255, 0.06);
  --sidebar-item-active: rgba(139, 92, 246, 0.18);
  --sidebar-shadow: 0 18px 40px rgba(0, 0, 0, 0.36);
}

/* Base global: tipografia, fondo y color de texto. */
html {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

* {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--text);
}

a {
  color: var(--accent-2);
}

code {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
  font-size: 0.85em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}