/* ==========================================================================
   Shiloh AI Playground — Shared Design Token System
   Dark (default) + Light theme via CSS custom properties
   With 6 Bible-app-style color themes
   ========================================================================== */

/* ----- Font Declarations (primary: already loaded via Google Fonts in HTML) ----- */

/* ----- 1. ROOT DEFAULTS (used by all themes) ----- */
:root {
  /* Border radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Transitions */
  --transition-fast:   0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-med:   0.3s  cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-slow:  0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-theme: 0.4s ease;

  /* Font defaults (overridable by data-font-family) */
  --font-title: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:  'Inter',  -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:  'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;

  /* Base font size (overridable by data-font-size) */
  --font-size-base: 14px;

  /* Neon glow effects (dynamic per theme) */
  --glow-violet: 0 0 12px rgba(138, 43, 226, 0.35);
  --glow-cyan:   0 0 12px rgba(0, 245, 255, 0.35);
  --glow-gold:   0 0 12px rgba(255, 215, 0, 0.35);
  --glow-red:    0 0 12px rgba(255, 59, 48, 0.35);
}

/* ======================================================================
   COLOR THEME: Sanctuary (default) — deep violet/cyan
   ====================================================================== */
[data-color-theme="sanctuary"][data-theme="dark"],
[data-color-theme="sanctuary"]:root:not([data-theme="light"]) {
  --bg: #0d0b16;
  --bg-card: rgba(20, 16, 33, 0.70);
  --bg-nav: rgba(25, 20, 41, 0.45);
  --bg-elevated: rgba(30, 25, 50, 0.55);
  --bg-overlay: rgba(0, 0, 0, 0.55);
  --bg-glass: rgba(25, 20, 41, 0.45);
  --bg-glass-active: rgba(255, 255, 255, 0.06);
  --bg-glass-card: rgba(20, 16, 33, 0.70);

  --text:           #f5f4f8;
  --text-secondary: #9aa0b3;
  --text-muted:     #64687d;

  --primary:       #8a2be2;
  --primary-hover: #9d4fef;
  --primary-light: rgba(138, 43, 226, 0.15);
  --accent-cyan:   #00f5ff;
  --accent-gold:   #ffd700;

  --success: #2ecc71;
  --danger:  #ff3b30;
  --warning: #ffd700;
  --info:    #00d4ff;

  --border:        rgba(255, 255, 255, 0.07);
  --border-light:  rgba(255, 255, 255, 0.04);
  --border-strong: rgba(255, 255, 255, 0.12);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.37);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.50);

  --bg-gradient: radial-gradient(circle at 50% 50%, #151125, #08060d);
  --card-gradient: linear-gradient(135deg, rgba(138,43,226,0.08), transparent);

  --glow-violet: 0 0 12px rgba(138, 43, 226, 0.35);
  --glow-cyan:   0 0 12px rgba(0, 245, 255, 0.35);
  --glow-gold:   0 0 12px rgba(255, 215, 0, 0.35);
  --glow-red:    0 0 12px rgba(255, 59, 48, 0.35);
}
[data-color-theme="sanctuary"][data-theme="light"] {
  --bg: #fafaf9;
  --bg-card: #ffffff;
  --bg-nav: rgba(255, 255, 255, 0.80);
  --bg-elevated: #ffffff;
  --bg-overlay: rgba(0, 0, 0, 0.30);
  --bg-glass: rgba(255, 255, 255, 0.70);
  --bg-glass-active: rgba(0, 0, 0, 0.04);
  --bg-glass-card: #ffffff;

  --text:           #1e293b;
  --text-secondary: #64748b;
  --text-muted:     #94a3b8;

  --primary:       #7c3aed;
  --primary-hover: #6d28d9;
  --primary-light: rgba(124, 58, 237, 0.10);
  --accent-cyan:   #0ea5e9;
  --accent-gold:   #d97706;

  --success: #22c55e;
  --danger:  #ef4444;
  --warning: #f59e0b;
  --info:    #0ea5e9;

  --border:        #e2e8f0;
  --border-light:  #f1f5f9;
  --border-strong: #cbd5e1;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

  --bg-gradient: linear-gradient(135deg, #fafaf9, #f5f3ff);
  --card-gradient: linear-gradient(135deg, rgba(124,58,237,0.04), transparent);

  --glow-violet: 0 0 12px rgba(124, 58, 237, 0.25);
  --glow-cyan:   0 0 12px rgba(14, 165, 233, 0.25);
  --glow-gold:   0 0 12px rgba(217, 119, 6, 0.25);
  --glow-red:    0 0 12px rgba(239, 68, 68, 0.25);
}

/* ======================================================================
   COLOR THEME: Serenity — cool ocean blues
   ====================================================================== */
[data-color-theme="serenity"][data-theme="dark"] {
  --bg: #0a0e1a;
  --bg-card: rgba(10, 15, 30, 0.72);
  --bg-nav: rgba(15, 20, 40, 0.48);
  --bg-elevated: rgba(20, 28, 52, 0.55);
  --bg-overlay: rgba(0, 0, 0, 0.55);
  --bg-glass: rgba(12, 18, 35, 0.48);
  --bg-glass-active: rgba(255, 255, 255, 0.06);
  --bg-glass-card: rgba(10, 15, 30, 0.72);

  --text:           #e8edf5;
  --text-secondary: #8896b0;
  --text-muted:     #5a6a85;

  --primary:       #3b82f6;
  --primary-hover: #60a5fa;
  --primary-light: rgba(59, 130, 246, 0.15);
  --accent-cyan:   #06b6d4;
  --accent-gold:   #eab308;

  --success: #22d3ee;
  --danger:  #f87171;
  --warning: #fbbf24;
  --info:    #38bdf8;

  --border:        rgba(255, 255, 255, 0.07);
  --border-light:  rgba(255, 255, 255, 0.04);
  --border-strong: rgba(255, 255, 255, 0.12);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.37);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.50);

  --bg-gradient: radial-gradient(circle at 50% 50%, #111827, #050812);
  --card-gradient: linear-gradient(135deg, rgba(59,130,246,0.08), transparent);

  --glow-violet: 0 0 12px rgba(59, 130, 246, 0.35);
  --glow-cyan:   0 0 12px rgba(6, 182, 212, 0.35);
  --glow-gold:   0 0 12px rgba(234, 179, 8, 0.35);
  --glow-red:    0 0 12px rgba(248, 113, 113, 0.35);
}
[data-color-theme="serenity"][data-theme="light"] {
  --bg: #f0f4ff;
  --bg-card: #ffffff;
  --bg-nav: rgba(255, 255, 255, 0.82);
  --bg-elevated: #ffffff;
  --bg-overlay: rgba(0, 0, 0, 0.30);
  --bg-glass: rgba(255, 255, 255, 0.72);
  --bg-glass-active: rgba(0, 0, 0, 0.04);
  --bg-glass-card: #ffffff;

  --text:           #1e293b;
  --text-secondary: #64748b;
  --text-muted:     #94a3b8;

  --primary:       #2563eb;
  --primary-hover: #1d4ed8;
  --primary-light: rgba(37, 99, 235, 0.10);
  --accent-cyan:   #0891b2;
  --accent-gold:   #ca8a04;

  --success: #059669;
  --danger:  #dc2626;
  --warning: #d97706;
  --info:    #0284c7;

  --border:        #dbeafe;
  --border-light:  #eff6ff;
  --border-strong: #bfdbfe;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10);

  --bg-gradient: linear-gradient(135deg, #f0f4ff, #e0e7ff);
  --card-gradient: linear-gradient(135deg, rgba(37,99,235,0.04), transparent);

  --glow-violet: 0 0 12px rgba(37, 99, 235, 0.25);
  --glow-cyan:   0 0 12px rgba(8, 145, 178, 0.25);
  --glow-gold:   0 0 12px rgba(202, 138, 4, 0.25);
  --glow-red:    0 0 12px rgba(220, 38, 38, 0.25);
}

/* ======================================================================
   COLOR THEME: Scripture — warm parchment/brown tones
   ====================================================================== */
[data-color-theme="scripture"][data-theme="dark"] {
  --bg: #1a1410;
  --bg-card: rgba(30, 22, 16, 0.72);
  --bg-nav: rgba(35, 26, 18, 0.48);
  --bg-elevated: rgba(40, 30, 20, 0.55);
  --bg-overlay: rgba(0, 0, 0, 0.55);
  --bg-glass: rgba(32, 24, 16, 0.48);
  --bg-glass-active: rgba(255, 255, 255, 0.05);
  --bg-glass-card: rgba(30, 22, 16, 0.72);

  --text:           #e8ddd0;
  --text-secondary: #b8a894;
  --text-muted:     #8a7a68;

  --primary:       #b8860b;
  --primary-hover: #d4a017;
  --primary-light: rgba(184, 134, 11, 0.15);
  --accent-cyan:   #d4a574;
  --accent-gold:   #cd853f;

  --success: #6b8e23;
  --danger:  #cd5c5c;
  --warning: #daa520;
  --info:    #b8860b;

  --border:        rgba(255, 255, 255, 0.06);
  --border-light:  rgba(255, 255, 255, 0.03);
  --border-strong: rgba(255, 255, 255, 0.10);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.55);

  --bg-gradient: radial-gradient(circle at 50% 50%, #1e1814, #0f0c08);
  --card-gradient: linear-gradient(135deg, rgba(184,134,11,0.08), transparent);

  --glow-violet: 0 0 12px rgba(184, 134, 11, 0.35);
  --glow-cyan:   0 0 12px rgba(212, 165, 116, 0.30);
  --glow-gold:   0 0 12px rgba(205, 133, 63, 0.35);
  --glow-red:    0 0 12px rgba(205, 92, 92, 0.35);
}
[data-color-theme="scripture"][data-theme="light"] {
  --bg: #fff8ef;
  --bg-card: #ffffff;
  --bg-nav: rgba(255, 255, 255, 0.82);
  --bg-elevated: #ffffff;
  --bg-overlay: rgba(0, 0, 0, 0.28);
  --bg-glass: rgba(255, 255, 255, 0.72);
  --bg-glass-active: rgba(0, 0, 0, 0.04);
  --bg-glass-card: #ffffff;

  --text:           #3d2e1e;
  --text-secondary: #7a6a58;
  --text-muted:     #a89888;

  --primary:       #92400e;
  --primary-hover: #78350f;
  --primary-light: rgba(146, 64, 14, 0.10);
  --accent-cyan:   #b45309;
  --accent-gold:   #d97706;

  --success: #65a30d;
  --danger:  #b91c1c;
  --warning: #d97706;
  --info:    #92400e;

  --border:        #e6ddd0;
  --border-light:  #f5efe8;
  --border-strong: #d6ccbc;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.09);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10);

  --bg-gradient: linear-gradient(135deg, #fff8ef, #f5efe8);
  --card-gradient: linear-gradient(135deg, rgba(146,64,14,0.04), transparent);

  --glow-violet: 0 0 12px rgba(146, 64, 14, 0.25);
  --glow-cyan:   0 0 12px rgba(180, 83, 9, 0.20);
  --glow-gold:   0 0 12px rgba(217, 119, 6, 0.25);
  --glow-red:    0 0 12px rgba(185, 28, 28, 0.25);
}

/* ======================================================================
   COLOR THEME: Harvest — warm amber/copper/orange
   ====================================================================== */
[data-color-theme="harvest"][data-theme="dark"] {
  --bg: #1a0f0a;
  --bg-card: rgba(30, 18, 10, 0.72);
  --bg-nav: rgba(35, 22, 12, 0.48);
  --bg-elevated: rgba(40, 26, 14, 0.55);
  --bg-overlay: rgba(0, 0, 0, 0.55);
  --bg-glass: rgba(32, 20, 10, 0.48);
  --bg-glass-active: rgba(255, 255, 255, 0.05);
  --bg-glass-card: rgba(30, 18, 10, 0.72);

  --text:           #f5e6d0;
  --text-secondary: #c4a88a;
  --text-muted:     #907a62;

  --primary:       #f97316;
  --primary-hover: #fb923c;
  --primary-light: rgba(249, 115, 22, 0.15);
  --accent-cyan:   #fb923c;
  --accent-gold:   #eab308;

  --success: #65a30d;
  --danger:  #ef4444;
  --warning: #f59e0b;
  --info:    #f97316;

  --border:        rgba(255, 255, 255, 0.06);
  --border-light:  rgba(255, 255, 255, 0.03);
  --border-strong: rgba(255, 255, 255, 0.10);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.55);

  --bg-gradient: radial-gradient(circle at 50% 50%, #1f1410, #0d0806);
  --card-gradient: linear-gradient(135deg, rgba(249,115,22,0.08), transparent);

  --glow-violet: 0 0 12px rgba(249, 115, 22, 0.35);
  --glow-cyan:   0 0 12px rgba(251, 146, 60, 0.30);
  --glow-gold:   0 0 12px rgba(234, 179, 8, 0.35);
  --glow-red:    0 0 12px rgba(239, 68, 68, 0.35);
}
[data-color-theme="harvest"][data-theme="light"] {
  --bg: #fff7ed;
  --bg-card: #ffffff;
  --bg-nav: rgba(255, 255, 255, 0.82);
  --bg-elevated: #ffffff;
  --bg-overlay: rgba(0, 0, 0, 0.28);
  --bg-glass: rgba(255, 255, 255, 0.72);
  --bg-glass-active: rgba(0, 0, 0, 0.04);
  --bg-glass-card: #ffffff;

  --text:           #2d1f0e;
  --text-secondary: #7a6048;
  --text-muted:     #a89078;

  --primary:       #ea580c;
  --primary-hover: #c2410c;
  --primary-light: rgba(234, 88, 12, 0.10);
  --accent-cyan:   #f97316;
  --accent-gold:   #d97706;

  --success: #65a30d;
  --danger:  #dc2626;
  --warning: #d97706;
  --info:    #ea580c;

  --border:        #fed7aa;
  --border-light:  #fff7ed;
  --border-strong: #fdba74;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10);

  --bg-gradient: linear-gradient(135deg, #fff7ed, #ffedd5);
  --card-gradient: linear-gradient(135deg, rgba(234,88,12,0.04), transparent);

  --glow-violet: 0 0 12px rgba(234, 88, 12, 0.25);
  --glow-cyan:   0 0 12px rgba(249, 115, 22, 0.20);
  --glow-gold:   0 0 12px rgba(217, 119, 6, 0.25);
  --glow-red:    0 0 12px rgba(220, 38, 38, 0.25);
}

/* ======================================================================
   COLOR THEME: Midnight — true deep dark with indigo accents
   ====================================================================== */
[data-color-theme="midnight"][data-theme="dark"] {
  --bg: #000000;
  --bg-card: rgba(8, 8, 16, 0.75);
  --bg-nav: rgba(12, 12, 24, 0.50);
  --bg-elevated: rgba(16, 16, 28, 0.55);
  --bg-overlay: rgba(0, 0, 0, 0.65);
  --bg-glass: rgba(10, 10, 22, 0.50);
  --bg-glass-active: rgba(255, 255, 255, 0.05);
  --bg-glass-card: rgba(8, 8, 16, 0.75);

  --text:           #e8e8f0;
  --text-secondary: #8888aa;
  --text-muted:     #555570;

  --primary:       #6366f1;
  --primary-hover: #818cf8;
  --primary-light: rgba(99, 102, 241, 0.15);
  --accent-cyan:   #22d3ee;
  --accent-gold:   #fbbf24;

  --success: #34d399;
  --danger:  #f87171;
  --warning: #fbbf24;
  --info:    #38bdf8;

  --border:        rgba(255, 255, 255, 0.07);
  --border-light:  rgba(255, 255, 255, 0.04);
  --border-strong: rgba(255, 255, 255, 0.12);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.60);

  --bg-gradient: radial-gradient(circle at 50% 50%, #0a0a1a, #000000);
  --card-gradient: linear-gradient(135deg, rgba(99,102,241,0.08), transparent);

  --glow-violet: 0 0 12px rgba(99, 102, 241, 0.35);
  --glow-cyan:   0 0 12px rgba(34, 211, 238, 0.35);
  --glow-gold:   0 0 12px rgba(251, 191, 36, 0.35);
  --glow-red:    0 0 12px rgba(248, 113, 113, 0.35);
}
[data-color-theme="midnight"][data-theme="light"] {
  --bg: #f8fafc;
  --bg-card: #ffffff;
  --bg-nav: rgba(255, 255, 255, 0.82);
  --bg-elevated: #ffffff;
  --bg-overlay: rgba(0, 0, 0, 0.28);
  --bg-glass: rgba(255, 255, 255, 0.72);
  --bg-glass-active: rgba(0, 0, 0, 0.04);
  --bg-glass-card: #ffffff;

  --text:           #0f172a;
  --text-secondary: #64748b;
  --text-muted:     #94a3b8;

  --primary:       #4f46e5;
  --primary-hover: #4338ca;
  --primary-light: rgba(79, 70, 229, 0.10);
  --accent-cyan:   #0891b2;
  --accent-gold:   #d97706;

  --success: #059669;
  --danger:  #dc2626;
  --warning: #d97706;
  --info:    #0284c7;

  --border:        #e2e8f0;
  --border-light:  #f1f5f9;
  --border-strong: #cbd5e1;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10);

  --bg-gradient: linear-gradient(135deg, #f8fafc, #eef2ff);
  --card-gradient: linear-gradient(135deg, rgba(79,70,229,0.04), transparent);

  --glow-violet: 0 0 12px rgba(79, 70, 229, 0.25);
  --glow-cyan:   0 0 12px rgba(8, 145, 178, 0.25);
  --glow-gold:   0 0 12px rgba(217, 119, 6, 0.25);
  --glow-red:    0 0 12px rgba(220, 38, 38, 0.25);
}

/* ======================================================================
   COLOR THEME: Dawn — soft pink/coral tones
   ====================================================================== */
[data-color-theme="dawn"][data-theme="dark"] {
  --bg: #1a0f1a;
  --bg-card: rgba(30, 16, 28, 0.72);
  --bg-nav: rgba(35, 20, 32, 0.48);
  --bg-elevated: rgba(40, 24, 38, 0.55);
  --bg-overlay: rgba(0, 0, 0, 0.55);
  --bg-glass: rgba(32, 18, 30, 0.48);
  --bg-glass-active: rgba(255, 255, 255, 0.05);
  --bg-glass-card: rgba(30, 16, 28, 0.72);

  --text:           #f0e0ea;
  --text-secondary: #c8a0b8;
  --text-muted:     #907088;

  --primary:       #ec4899;
  --primary-hover: #f472b6;
  --primary-light: rgba(236, 72, 153, 0.15);
  --accent-cyan:   #f472b6;
  --accent-gold:   #fbbf24;

  --success: #a78bfa;
  --danger:  #f43f5e;
  --warning: #f59e0b;
  --info:    #e879f9;

  --border:        rgba(255, 255, 255, 0.06);
  --border-light:  rgba(255, 255, 255, 0.03);
  --border-strong: rgba(255, 255, 255, 0.10);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.55);

  --bg-gradient: radial-gradient(circle at 50% 50%, #1e1418, #0d080c);
  --card-gradient: linear-gradient(135deg, rgba(236,72,153,0.08), transparent);

  --glow-violet: 0 0 12px rgba(236, 72, 153, 0.35);
  --glow-cyan:   0 0 12px rgba(244, 114, 182, 0.30);
  --glow-gold:   0 0 12px rgba(251, 191, 36, 0.35);
  --glow-red:    0 0 12px rgba(244, 63, 94, 0.35);
}
[data-color-theme="dawn"][data-theme="light"] {
  --bg: #fff5f7;
  --bg-card: #ffffff;
  --bg-nav: rgba(255, 255, 255, 0.82);
  --bg-elevated: #ffffff;
  --bg-overlay: rgba(0, 0, 0, 0.28);
  --bg-glass: rgba(255, 255, 255, 0.72);
  --bg-glass-active: rgba(0, 0, 0, 0.04);
  --bg-glass-card: #ffffff;

  --text:           #2d1a22;
  --text-secondary: #7a5870;
  --text-muted:     #a88898;

  --primary:       #db2777;
  --primary-hover: #be185d;
  --primary-light: rgba(219, 39, 119, 0.10);
  --accent-cyan:   #e11d48;
  --accent-gold:   #d97706;

  --success: #7c3aed;
  --danger:  #be123c;
  --warning: #d97706;
  --info:    #db2777;

  --border:        #fce4ec;
  --border-light:  #fff0f3;
  --border-strong: #f8b4c8;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10);

  --bg-gradient: linear-gradient(135deg, #fff5f7, #fce7f3);
  --card-gradient: linear-gradient(135deg, rgba(219,39,119,0.04), transparent);

  --glow-violet: 0 0 12px rgba(219, 39, 119, 0.25);
  --glow-cyan:   0 0 12px rgba(225, 29, 72, 0.20);
  --glow-gold:   0 0 12px rgba(217, 119, 6, 0.25);
  --glow-red:    0 0 12px rgba(190, 18, 60, 0.25);
}

/* ----- Fallback: if no data-color-theme set, use sanctuary defaults ----- */
:root:not([data-color-theme]),
[data-color-theme="sanctuary"] {
  /* Colors are already defined above — this just ensures the selector exists */
}

/* ======================================================================
   FONT FAMILY OVERRIDES
   ====================================================================== */
[data-font-family="inter"]     { --font-body: 'Inter', -apple-system, sans-serif; --font-title: 'Outfit', -apple-system, sans-serif; }
[data-font-family="outfit"]    { --font-body: 'Outfit', -apple-system, sans-serif; --font-title: 'Outfit', -apple-system, sans-serif; }
[data-font-family="atkinson"]  { --font-body: 'Atkinson Hyperlegible', sans-serif; --font-title: 'Atkinson Hyperlegible', sans-serif; }
[data-font-family="opendyslexic"] { --font-body: 'OpenDyslexic', sans-serif; --font-title: 'OpenDyslexic', sans-serif; }
[data-font-family="georgia"]   { --font-body: Georgia, 'Times New Roman', serif; --font-title: Georgia, 'Times New Roman', serif; }
[data-font-family="firacode"]  { --font-body: 'Fira Code', 'Cascadia Code', monospace; --font-title: 'Outfit', -apple-system, sans-serif; }

/* ======================================================================
   FONT SIZE OVERRIDES
   ====================================================================== */
[data-font-size="small"]  { --font-size-base: 13px; --font-size-scale: 0.85; }
[data-font-size="medium"] { --font-size-base: 14px; --font-size-scale: 1; }
[data-font-size="large"]  { --font-size-base: 16px; --font-size-scale: 1.15; }
[data-font-size="xlarge"] { --font-size-base: 18px; --font-size-scale: 1.3; }

/* ======================================================================
   THEMED GLOBAL STYLES
   ====================================================================== */

/* Apply background & text transition to everything themable */
html, body, .header, .nav-bar, .lesson-card, .stat-card,
button, input, select, textarea, .kid-btn, .lb-row, .lb-podium-card,
[class*="bg-"], [class*="glass"], [class*="card"] {
  transition:
    background var(--transition-theme),
    color var(--transition-theme),
    border-color var(--transition-theme),
    box-shadow var(--transition-theme);
}

/* Apply the theme background + text */
body {
  background: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--text);
}

/* Apply font size to body */
body, button, input, select, textarea {
  font-size: var(--font-size-base);
}

/* Font scale zoom for universal text sizing */
body {
  zoom: var(--font-size-scale, 1);
}

/* ----- ALL links used as buttons MUST NOT have underlines ----- */
a:not(.keep-underline) {
  text-decoration: none !important;
}
a:not(.keep-underline):not(.styled-link):hover {
  text-decoration: none !important;
}
a.styled-link {
  color: var(--primary);
  text-decoration: none;
  transition: var(--transition-fast);
}
a.styled-link:hover {
  text-decoration: underline;
  color: var(--primary-hover);
}

/* ======================================================================
   THEME-AWARE COMPONENT OVERRIDES
   ====================================================================== */
.glass {
  background: var(--bg-glass);
  border: 1px solid var(--border);
}
.kanban-column {
  background: var(--bg-nav);
  border: 1px solid var(--border);
}
.markdown-preview {
  color: var(--text);
}
input, textarea, select {
  color: var(--text);
}

/* Scrollbar */
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.10);
}
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--primary) 40%, transparent);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* Kanban card hover */
.kanban-card:hover {
  box-shadow: var(--shadow-md);
}

/* Tab panels */
.tab-panel {
  animation: fadeIn 0.4s ease;
}

/* User greeting tag */
.user-greeting-tag {
  color: var(--text-secondary);
}

/* ======================================================================
   THEME TOGGLE BUTTON
   ====================================================================== */
.theme-toggle-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 14px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-fast);
}
.theme-toggle-btn:hover {
  background: var(--bg-glass-active);
  color: var(--text);
}
.theme-toggle-btn i {
  font-size: 0.85rem;
}

/* ======================================================================
   THEME COMPATIBILITY — maps old variable names → new ones
   ====================================================================== */
:root {
  --neon-violet: var(--primary);
  --neon-cyan:   var(--accent-cyan);
  --neon-gold:   var(--accent-gold);
  --neon-red:    var(--danger);
  --neon-violet-glow: var(--glow-violet);
  --neon-cyan-glow:   var(--glow-cyan);
  --text-main:        var(--text);
  --text-secondary:   var(--text-secondary);
  --border-glass:     1px solid var(--border);
  --border-glass-glow: 1px solid var(--border-strong);
  --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --border-radius-sm:  var(--radius-sm);
  --border-radius-md:  var(--radius-md);
  --border-radius-lg:  var(--radius-lg);
}