/* ============================================================
   Theme tokens — dark (default) & light
   These are the variables referenced by inline styles in JSX.
   ============================================================ */

:root,
[data-theme="dark"] {
  --c-bg: #0A211F;
  --c-bg-deep: #060E0D;
  --c-bg-cinematic: #060E0D; /* always dark — per DS spec */
  --c-surface: #0D2B2A;
  --c-border: #1E4A45;
  --c-border-subtle: rgba(30,74,69,0.5);
  --c-text-primary: #FFFFFF;
  --c-text-secondary: #B4BAB3;
  --c-text-tertiary: #8A9391;
  --c-text-quaternary: #6B7573;
  --c-accent: #0DE7B4;
  --c-accent-2: #D8FF85;
  --c-nav-bg: rgba(6,14,13,0.72);
  --c-nav-border: rgba(30,74,69,0.6);
  color-scheme: dark;
}

[data-theme="light"] {
  --c-bg: #FAFBFA;
  --c-bg-deep: #F0F2F0;
  --c-bg-cinematic: #060E0D; /* stays dark even in light mode */
  --c-surface: #FFFFFF;
  --c-border: #D4DAD8;
  --c-border-subtle: rgba(212,218,216,0.7);
  --c-text-primary: #0A211F;
  --c-text-secondary: #4A5654;
  --c-text-tertiary: #6B7573;
  --c-text-quaternary: #8A9290;
  --c-accent: #0BAA85;
  --c-accent-2: #7AA600;
  --c-nav-bg: rgba(250,251,250,0.75);
  --c-nav-border: rgba(212,218,216,0.8);
  color-scheme: light;
}

/* Base body follows theme */
html, body {
  background: var(--c-bg);
  color: var(--c-text-primary);
  transition: background 240ms cubic-bezier(0.4,0,0.2,1), color 240ms cubic-bezier(0.4,0,0.2,1);
}

/* Theme toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: transparent;
  color: var(--c-text-secondary);
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: all 180ms ease;
}
.theme-toggle:hover { color: var(--c-accent); border-color: var(--c-accent); }
.theme-toggle svg { width: 12px; height: 12px; flex-shrink: 0; }

/* Liquid-glass: light-mode override (the one from backgrounds.css already handles this for .liquid-glass) */
[data-theme="light"] .liquid-glass-dark {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 8px 32px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
}
[data-theme="light"] .liquid-glass-tinted {
  background: linear-gradient(135deg, rgba(11,170,133,0.08), rgba(122,166,0,0.04));
  border: 1px solid rgba(11,170,133,0.2);
}