/* =============================================
   THEME DEFINITIONS
   To add a new theme:
     1. Add a [data-theme="your-theme"] block below with all vars
     2. If it has light/dark variants, add both and register it
        in THEMES_WITH_VARIANTS in app.js and the early-init
        script in index.html
     3. Add an option in the .theme-panel-opts[data-base] list
        in index.html
   ============================================= */

/* ---- Cosmos (dark) ---- */
:root,
[data-theme="cosmos"] {
  --bg: #0a0a0f;
  --bg-elevated: #111118;
  --bg-card: #16161e;
  --bg-hover: #1c1c26;
  --border: rgba(255, 255, 255, 0.06);
  --border-subtle: rgba(255, 255, 255, 0.04);
  --ink: #e8e8ed;
  --ink-secondary: #a0a0b0;
  --muted: #6b6b80;
  --accent: #6366f1;
  --accent-glow: rgba(99, 102, 241, 0.15);
  --accent-2: #8b5cf6;
  --accent-warm: #f97316;
  --accent-green: #22c55e;
  --accent-red: #ef4444;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-heading: "Space Grotesk", -apple-system, sans-serif;
  --header-bg: rgba(10, 10, 15, 0.92);
  --header-blur: blur(12px);
  --panel-top-line: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), transparent);
  --veil-bg:
    radial-gradient(ellipse 60% 50% at 0% 0%, rgba(99, 102, 241, 0.08), transparent),
    radial-gradient(ellipse 50% 40% at 100% 0%, rgba(139, 92, 246, 0.06), transparent);
}

/* ---- Brutalist Light ---- */
/*
   Authentic brutalism: exposed structure, stark light background,
   hyperlink blue, hard offset shadows, no softness anywhere.
   Reference: Craigslist, Bloomberg, raw HTML aesthetics.
*/
[data-theme="brutalist-light"] {
  --bg: #e8e8e8;
  --bg-elevated: #d8d8d8;
  --bg-card: #ffffff;
  --bg-hover: #f0f0f0;
  --border: #000000;
  --border-subtle: rgba(0, 0, 0, 0.35);
  --ink: #000000;
  --ink-secondary: #222222;
  --muted: #555555;
  --accent: #0000ee;         /* hyperlink blue */
  --accent-glow: rgba(0, 0, 238, 0.08);
  --accent-2: #551a8b;       /* visited-link purple */
  --accent-warm: #cc0000;
  --accent-green: #006600;
  --accent-red: #cc0000;
  --shadow: none;
  --shadow-lg: 4px 4px 0 #000000;
  --radius: 0px;
  --radius-sm: 0px;
  --radius-xs: 0px;
  --font-body: "Courier New", Courier, monospace;
  --font-heading: "Courier New", Courier, monospace;
  --header-bg: #ffffff;
  --header-blur: none;
  --panel-top-line: #000000;
  --veil-bg: none;
}

/* ---- Brutalist Dark ---- */
/*
   Same raw structure as light — inverted. Heavy visible borders,
   hard offset shadows in gray, bright hyperlink blue on dark.
*/
[data-theme="brutalist-dark"] {
  --bg: #111111;
  --bg-elevated: #1a1a1a;
  --bg-card: #0d0d0d;
  --bg-hover: #1e1e1e;
  --border: #aaaaaa;
  --border-subtle: rgba(180, 180, 180, 0.3);
  --ink: #f0f0f0;
  --ink-secondary: #cccccc;
  --muted: #888888;
  --accent: #4499ff;         /* hyperlink blue, brightened for dark bg */
  --accent-glow: rgba(68, 153, 255, 0.12);
  --accent-2: #cc88ff;       /* visited purple, lightened */
  --accent-warm: #ff6644;
  --accent-green: #44ee88;
  --accent-red: #ff4444;
  --shadow: none;
  --shadow-lg: 4px 4px 0 #aaaaaa;
  --radius: 0px;
  --radius-sm: 0px;
  --radius-xs: 0px;
  --font-body: "Courier New", Courier, monospace;
  --font-heading: "Courier New", Courier, monospace;
  --header-bg: #0d0d0d;
  --header-blur: none;
  --panel-top-line: #aaaaaa;
  --veil-bg: none;
}

/* ---- Brutalist shared structural overrides ----
   Uses var(--border) and var(--shadow-lg) so light/dark
   variants automatically get the right colors.              */

/* Descriptive / data text stays in system sans-serif for legibility.
   Monospace is for headings and UI chrome where it makes a statement. */
[data-theme^="brutalist"] .panel-header p,
[data-theme^="brutalist"] .metric-label-inline,
[data-theme^="brutalist"] .table td,
[data-theme^="brutalist"] .table th,
[data-theme^="brutalist"] .map-stats,
[data-theme^="brutalist"] .note,
[data-theme^="brutalist"] .profile-stat,
[data-theme^="brutalist"] .profile-section-title,
[data-theme^="brutalist"] .footer {
  font-family: system-ui, -apple-system, sans-serif;
}
[data-theme^="brutalist"] .panel {
  border-width: 2px;
  box-shadow: var(--shadow-lg);
}

[data-theme^="brutalist"] .panel::before {
  height: 3px;
}

[data-theme^="brutalist"] .site-header {
  border-bottom: 3px solid var(--border);
}

[data-theme^="brutalist"] .hero-metrics-inline {
  border-width: 2px;
  box-shadow: var(--shadow-lg);
}

[data-theme^="brutalist"] .search-controls input,
[data-theme^="brutalist"] .judge-controls input,
[data-theme^="brutalist"] .power-year-controls input,
[data-theme^="brutalist"] .power-year-controls select {
  border-width: 2px;
  border-color: var(--border);
}

[data-theme^="brutalist"] .search-controls input:focus,
[data-theme^="brutalist"] .judge-controls input:focus,
[data-theme^="brutalist"] .power-year-controls input:focus {
  box-shadow: 3px 3px 0 var(--border);
  border-color: var(--accent);
}

[data-theme^="brutalist"] .toggle,
[data-theme^="brutalist"] .search-tabs {
  background: transparent;
  border: 2px solid var(--border);
}

[data-theme^="brutalist"] .toggle button.active,
[data-theme^="brutalist"] .search-tabs button.active {
  box-shadow: none;
}

[data-theme^="brutalist"] .search-results {
  border-width: 2px;
  box-shadow: var(--shadow-lg);
}

[data-theme^="brutalist"] .search-card {
  border-width: 2px;
}

[data-theme^="brutalist"] .total-card {
  border-width: 2px;
  box-shadow: var(--shadow-lg);
}

[data-theme^="brutalist"] .theme-panel-trigger {
  border-width: 2px;
  box-shadow: 2px 2px 0 var(--border);
}

[data-theme^="brutalist"] .theme-panel-dropdown {
  border-width: 2px;
  box-shadow: var(--shadow-lg);
}

[data-theme^="brutalist"] .theme-opt {
  border-width: 2px;
}

[data-theme^="brutalist"] .theme-opt.active {
  box-shadow: 2px 2px 0 var(--border);
}

/* ---- Terminal ---- */
[data-theme="terminal"] {
  --bg: #000000;
  --bg-elevated: #050505;
  --bg-card: #060a06;
  --bg-hover: #0b110b;
  --border: rgba(0, 255, 70, 0.28);
  --border-subtle: rgba(0, 255, 70, 0.12);
  --ink: #00ff46;
  --ink-secondary: #00cc37;
  --muted: #007a22;
  --accent: #00ff46;
  --accent-glow: rgba(0, 255, 70, 0.15);
  --accent-2: #00ccff;
  --accent-warm: #ffcc00;
  --accent-green: #00ff46;
  --accent-red: #ff4444;
  --shadow: none;
  --shadow-lg: 0 0 20px rgba(0, 255, 70, 0.15);
  --radius: 2px;
  --radius-sm: 1px;
  --radius-xs: 1px;
  --font-body: "Courier New", Courier, monospace;
  --font-heading: "Courier New", Courier, monospace;
  --header-bg: rgba(0, 0, 0, 0.97);
  --header-blur: blur(4px);
  --panel-top-line: linear-gradient(90deg, transparent, rgba(0, 255, 70, 0.4), transparent);
  --veil-bg: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0, 255, 70, 0.03), transparent);
}

/* ---- Clean (light) ---- */
[data-theme="clean"] {
  --bg: #f8f8f8;
  --bg-elevated: #efefef;
  --bg-card: #ffffff;
  --bg-hover: #f2f2f2;
  --border: rgba(0, 0, 0, 0.1);
  --border-subtle: rgba(0, 0, 0, 0.06);
  --ink: #111111;
  --ink-secondary: #444444;
  --muted: #888888;
  --accent: #2563eb;
  --accent-glow: rgba(37, 99, 235, 0.12);
  --accent-2: #7c3aed;
  --accent-warm: #ea580c;
  --accent-green: #16a34a;
  --accent-red: #dc2626;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --radius: 10px;
  --radius-sm: 6px;
  --radius-xs: 4px;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-heading: "Space Grotesk", -apple-system, sans-serif;
  --header-bg: rgba(248, 248, 248, 0.92);
  --header-blur: blur(12px);
  --panel-top-line: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.3), transparent);
  --veil-bg:
    radial-gradient(ellipse 60% 50% at 0% 0%, rgba(37, 99, 235, 0.04), transparent),
    radial-gradient(ellipse 50% 40% at 100% 0%, rgba(124, 58, 237, 0.03), transparent);
}