/* ============================================================
   THEMES.CSS — Light Mode & Dark Mode Design Tokens
   Each design philosophy has its own distinct visual variables
   ============================================================ */

/* Anti-flash: apply background instantly before body paints */
html { background: #F7F5F0; transition: background 0s; }
html[data-theme="dark"] { background: #0B0E17; color-scheme: dark; }

/* ===== LIGHT MODE — Warm, textured, editorial ===== */
:root {
  /* Core palette */
  --bg-1: #F7F5F0;
  --bg-2: #FFFFFF;
  --card-bg: #FFFFFF;
  --footer-bg: #F0EDE6;
  --text-1: #1A1A2E;
  --text-2: #5A6078;
  --text-3: #9CA3AF;
  --border-1: #D8D4CC;
  --border-2: #EAE7E0;
  --accent: #2563EB;
  --accent-bg: rgba(37,99,235,0.07);
  --urgency: #DC2626;
  --img-bg: #E8E4DC;
  --overlay-bg: rgba(26,26,46,0.45);

  /* Gradients */
  --grad-accent: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  /* Background pattern — subtle dot grid */
  --bg-pattern: radial-gradient(circle, rgba(0,0,0,.04) 1px, transparent 1px);
  background-size: 20px 20px;

  /* AI section background */
  --ai-bg-gradient: radial-gradient(ellipse at 30% 50%, rgba(102,126,234,0.06) 0%, transparent 60%),
                    radial-gradient(ellipse at 70% 50%, rgba(118,75,162,0.04) 0%, transparent 60%);

  --newsletter-orb: radial-gradient(circle, rgba(37,99,235,0.1), transparent 70%);

  /* ---- GLASSMORPHISM tokens ---- */
  --glass-bg: rgba(255,255,255,0.7);
  --glass-border: rgba(255,255,255,0.5);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.06);
  --glass-shadow-lg: 0 20px 60px rgba(0,0,0,0.08);

  /* ---- NEOBRUTALISM tokens ---- */
  --neo-border: 2px solid #1A1A2E;
  --neo-border-thick: 3px solid #1A1A2E;
  --neo-shadow: 4px 4px 0 #1A1A2E;
  --neo-active-bg: #1A1A2E;
  --neo-active-text: #F7F5F0;
  --neo-ticker-bg: #1A1A2E;
  --neo-ticker-text: #F7F5F0;

  /* ---- CLAYMORPHISM tokens ---- */
  --clay-border: 1px solid rgba(0,0,0,0.04);
  --clay-shadow:
    0 4px 6px rgba(0,0,0,0.04),
    0 10px 24px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(0,0,0,0.03);
  --clay-shadow-hover:
    0 8px 16px rgba(0,0,0,0.06),
    0 16px 40px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,0.04);

  /* ---- LIQUID GLASS tokens ---- */
  --liquid-bg: rgba(255,255,255,0.55);
  --liquid-border: 1px solid rgba(255,255,255,0.6);
  --liquid-shadow: 0 16px 64px rgba(37,99,235,0.08), 0 0 0 1px rgba(37,99,235,0.04);
  --liquid-refraction:
    radial-gradient(circle at 30% 40%, rgba(37,99,235,0.06) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(124,58,237,0.04) 0%, transparent 50%),
    radial-gradient(circle at 50% 20%, rgba(6,182,212,0.03) 0%, transparent 40%);

  /* ---- SKEUOMORPHISM tokens ---- */
  --skeu-border: 1px solid #D8D4CC;
  --skeu-shadow:
    0 1px 3px rgba(0,0,0,0.06),
    0 4px 12px rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.8);
  --skeu-shadow-hover:
    0 4px 8px rgba(0,0,0,0.08),
    0 12px 32px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,1);
  --skeu-texture: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(0,0,0,0.01) 50%, rgba(255,255,255,0.2) 100%);
  --skeu-quote-bg: rgba(37,99,235,0.04);

  /* Glow */
  --glow-accent: 0 0 0 4px rgba(37,99,235,0.12), 0 4px 20px rgba(37,99,235,0.15);

  /* ---- FINANCE tokens ---- */
  --fin-green: #22C55E;
  --fin-green-bg: rgba(34,197,94,0.08);
  --fin-red: #EF4444;
  --fin-red-bg: rgba(239,68,68,0.08);
  --fin-neutral: #F59E0B;
  --fin-card-bg: rgba(255,255,255,0.65);
  --fin-card-border: rgba(255,255,255,0.5);
  --fin-card-shadow: 0 8px 32px rgba(0,0,0,0.06), 0 0 0 1px rgba(37,99,235,0.04);
  --fin-ticker-bg: rgba(255,255,255,0.85);

  /* ---- DASHBOARD tokens ---- */
  --status-bar-bg: rgba(247,245,240,0.92);
  --snapshot-bg: linear-gradient(135deg, rgba(37,99,235,0.04) 0%, rgba(129,140,248,0.03) 100%);
  --snapshot-border: rgba(37,99,235,0.08);
  --scope-local-text: #2563EB;
  --scope-local-bg: rgba(37,99,235,0.08);
  --scope-local-border: rgba(37,99,235,0.15);
  --scope-national-text: #7C3AED;
  --scope-national-bg: rgba(124,58,237,0.08);
  --scope-national-border: rgba(124,58,237,0.15);
  --scope-global-text: #64748B;
  --scope-global-bg: rgba(100,116,139,0.08);
  --scope-global-border: rgba(100,116,139,0.15);
  --why-bg: rgba(37,99,235,0.04);
  --urgent-bg: #FEF2F2;
  --urgent-border: rgba(239,68,68,0.15);
}


/* ===== DARK MODE — Rich navy, ambient glows, aurora gradients ===== */
[data-theme="dark"] {
  /* Core palette — deep navy, NOT flat black */
  --bg-1: #0B0E17;
  --bg-2: #12162A;
  --card-bg: #161B33;
  --footer-bg: #0D1020;
  --text-1: #E8E9F0;
  --text-2: #8B90B0;
  --text-3: #555A78;
  --border-1: #2A2F4A;
  --border-2: #1E2240;
  --accent: #818CF8;
  --accent-bg: rgba(129,140,248,0.1);
  --urgency: #EF4444;
  --img-bg: #1C2040;
  --overlay-bg: rgba(0,0,0,0.6);

  /* Gradients — aurora inspired */
  --grad-accent: linear-gradient(135deg, #818CF8 0%, #C084FC 50%, #F472B6 100%);

  /* Background pattern — subtle grid with glow */
  --bg-pattern:
    radial-gradient(circle, rgba(129,140,248,0.03) 1px, transparent 1px);

  /* AI section — aurora glow */
  --ai-bg-gradient:
    radial-gradient(ellipse at 20% 50%, rgba(129,140,248,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 40%, rgba(192,132,252,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(244,114,182,0.05) 0%, transparent 40%);

  --newsletter-orb: radial-gradient(circle, rgba(129,140,248,0.15), transparent 60%);

  /* ---- GLASSMORPHISM — dark glass with subtle luminosity ---- */
  --glass-bg: rgba(22,27,51,0.75);
  --glass-border: rgba(129,140,248,0.12);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(129,140,248,0.06);
  --glass-shadow-lg: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(129,140,248,0.08);

  /* ---- NEOBRUTALISM — glowing borders in dark mode ---- */
  --neo-border: 2px solid rgba(129,140,248,0.35);
  --neo-border-thick: 3px solid rgba(129,140,248,0.3);
  --neo-shadow: 4px 4px 0 rgba(129,140,248,0.2), 0 0 12px rgba(129,140,248,0.08);
  --neo-active-bg: #818CF8;
  --neo-active-text: #0B0E17;
  --neo-ticker-bg: linear-gradient(90deg, #161B33, #1C2040);
  --neo-ticker-text: #E8E9F0;

  /* ---- CLAYMORPHISM — deep emboss with ambient glow ---- */
  --clay-border: 1px solid rgba(129,140,248,0.08);
  --clay-shadow:
    0 4px 8px rgba(0,0,0,0.3),
    0 12px 28px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 0 0 1px rgba(129,140,248,0.04);
  --clay-shadow-hover:
    0 8px 20px rgba(0,0,0,0.35),
    0 20px 48px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 24px rgba(129,140,248,0.08),
    0 0 0 1px rgba(129,140,248,0.1);

  /* ---- LIQUID GLASS — translucent with rainbow edge ---- */
  --liquid-bg: rgba(22,27,51,0.6);
  --liquid-border: 1px solid rgba(129,140,248,0.15);
  --liquid-shadow:
    0 16px 64px rgba(0,0,0,0.4),
    0 0 40px rgba(129,140,248,0.06),
    0 0 0 1px rgba(129,140,248,0.08);
  --liquid-refraction:
    radial-gradient(circle at 25% 35%, rgba(129,140,248,0.1) 0%, transparent 45%),
    radial-gradient(circle at 75% 55%, rgba(192,132,252,0.08) 0%, transparent 45%),
    radial-gradient(circle at 45% 15%, rgba(6,182,212,0.06) 0%, transparent 35%);

  /* ---- SKEUOMORPHISM — raised panels with subtle inner light ---- */
  --skeu-border: 1px solid rgba(129,140,248,0.1);
  --skeu-shadow:
    0 2px 6px rgba(0,0,0,0.3),
    0 8px 20px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.04);
  --skeu-shadow-hover:
    0 4px 12px rgba(0,0,0,0.35),
    0 16px 40px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 20px rgba(129,140,248,0.06);
  --skeu-texture: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.05) 50%, rgba(255,255,255,0.01) 100%);
  --skeu-quote-bg: rgba(129,140,248,0.06);

  /* Glow — more pronounced in dark mode */
  --glow-accent: 0 0 0 4px rgba(129,140,248,0.15), 0 4px 24px rgba(129,140,248,0.2), 0 0 60px rgba(129,140,248,0.06);

  /* ---- FINANCE tokens (dark) ---- */
  --fin-green: #4ADE80;
  --fin-green-bg: rgba(74,222,128,0.1);
  --fin-red: #F87171;
  --fin-red-bg: rgba(248,113,113,0.1);
  --fin-neutral: #FBBF24;
  --fin-card-bg: rgba(22,27,51,0.65);
  --fin-card-border: rgba(129,140,248,0.12);
  --fin-card-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(129,140,248,0.06);
  --fin-ticker-bg: rgba(22,27,51,0.85);

  /* ---- DASHBOARD tokens (dark) ---- */
  --status-bar-bg: rgba(11,14,23,0.92);
  --snapshot-bg: linear-gradient(135deg, rgba(129,140,248,0.06) 0%, rgba(6,182,212,0.04) 100%);
  --snapshot-border: rgba(129,140,248,0.12);
  --scope-local-text: #93A3F8;
  --scope-local-bg: rgba(129,140,248,0.1);
  --scope-local-border: rgba(129,140,248,0.25);
  --scope-national-text: #C4B5FD;
  --scope-national-bg: rgba(196,181,253,0.1);
  --scope-national-border: rgba(196,181,253,0.2);
  --scope-global-text: #94A3B8;
  --scope-global-bg: rgba(148,163,184,0.1);
  --scope-global-border: rgba(148,163,184,0.2);
  --why-bg: rgba(129,140,248,0.06);
  --urgent-bg: rgba(239,68,68,0.08);
  --urgent-border: rgba(239,68,68,0.2);
}

/* Dark mode category tags — glow borders */
[data-theme="dark"] .category-tag.tech{color:#93A3F8;background:rgba(129,140,248,.1);border-color:rgba(129,140,248,.4)}
[data-theme="dark"] .category-tag.science{color:#5EEAD4;background:rgba(94,234,212,.08);border-color:rgba(94,234,212,.35)}
[data-theme="dark"] .category-tag.economy{color:#6EE7B7;background:rgba(110,231,183,.08);border-color:rgba(110,231,183,.35)}
[data-theme="dark"] .category-tag.politics{color:#FCA5A5;background:rgba(252,165,165,.08);border-color:rgba(252,165,165,.3)}
[data-theme="dark"] .category-tag.health{color:#6EE7B7;background:rgba(110,231,183,.08);border-color:rgba(110,231,183,.35)}
[data-theme="dark"] .category-tag.culture{color:#C4B5FD;background:rgba(196,181,253,.08);border-color:rgba(196,181,253,.35)}
[data-theme="dark"] .category-tag.india{color:#FCD34D;background:rgba(252,211,77,.08);border-color:rgba(252,211,77,.3)}
[data-theme="dark"] .category-tag.opinion{color:#A5B4FC;background:rgba(165,180,252,.08);border-color:rgba(165,180,252,.35)}

/* Dark mode ticker */
[data-theme="dark"] .breaking-ticker{background:var(--neo-ticker-bg);border-bottom-color:rgba(129,140,248,.15)}
[data-theme="dark"] .ticker-badge{background:#EF4444;box-shadow:0 0 12px rgba(239,68,68,.3)}

/* Dark mode deep dive labels */
[data-theme="dark"] .deepdive-card:nth-child(1) .deepdive-label{color:#93A3F8;border-color:rgba(129,140,248,.4);background:rgba(129,140,248,.1)}
[data-theme="dark"] .deepdive-card:nth-child(2) .deepdive-label{color:#6EE7B7;border-color:rgba(110,231,183,.4);background:rgba(110,231,183,.1)}
[data-theme="dark"] .deepdive-card:nth-child(3) .deepdive-label{color:#C4B5FD;border-color:rgba(196,181,253,.4);background:rgba(196,181,253,.1)}

/* Dark mode ambient body glow */
[data-theme="dark"] body{
  background:
    radial-gradient(ellipse at 15% 5%, rgba(129,140,248,0.04) 0%, transparent 40%),
    radial-gradient(ellipse at 85% 95%, rgba(192,132,252,0.03) 0%, transparent 40%),
    #0B0E17;
}

/* Dark mode scrollbar */
[data-theme="dark"]::-webkit-scrollbar-track{background:#0B0E17}
[data-theme="dark"]::-webkit-scrollbar-thumb{background:#2A2F4A}
[data-theme="dark"]::-webkit-scrollbar-thumb:hover{background:#555A78}