/* ============================================================
   GradeMind shared theme — light + dark
   Loaded AFTER each page's inline <style>, so these rules win.
   All pages already use the same token names (--bg, --cyan, ...),
   so retuning them here restyles the whole app at once.
   ============================================================ */

/* ---------- DARK (default) ---------- */
:root{
  --bg:#131824; --surface:#1b2233; --surface2:#222c40; --surface3:#2c3850;
  --border:#2a3550; --border2:#3a4868;
  --cyan:#38cde0; --purple:#8b8dff; --green:#34d399; --red:#f87171; --orange:#fbbf24;
  --text:#e9eef7; --text2:#a2b2cc; --muted:#6d80a0; --muted2:#3a4a66;

  --topbar-bg:rgba(19,24,36,.88);
  --glow1:rgba(124,131,255,.09); --glow2:rgba(56,205,224,.055);
  --grid-line:rgba(124,131,255,.02);
  --shadow-sm:0 2px 8px rgba(0,0,0,.3);
  --shadow-md:0 4px 20px rgba(0,0,0,.4);
  --shadow-lg:0 8px 40px rgba(0,0,0,.5);
  --font-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;

  color-scheme:dark;
}

/* ---------- LIGHT when the device prefers light and the user hasn't forced dark ---------- */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f3f6fb; --surface:#ffffff; --surface2:#eef2f9; --surface3:#e4eaf4;
    --border:#e4e9f2; --border2:#cdd7e6;
    --cyan:#0e9bb5; --purple:#5b63f0; --green:#0f9d6b; --red:#e24a4a; --orange:#d6871a;
    --text:#1b2436; --text2:#4f5e78; --muted:#7a8aa4; --muted2:#c4cee0;

    --topbar-bg:rgba(255,255,255,.9);
    --glow1:rgba(91,99,240,.05); --glow2:rgba(14,155,181,.045);
    --grid-line:rgba(91,99,240,.035);
    --shadow-sm:0 2px 8px rgba(23,40,80,.08);
    --shadow-md:0 6px 22px rgba(23,40,80,.1);
    --shadow-lg:0 12px 40px rgba(23,40,80,.14);

    color-scheme:light;
  }
}

/* ---------- LIGHT forced by the toggle ---------- */
:root[data-theme="light"]{
  --bg:#f3f6fb; --surface:#ffffff; --surface2:#eef2f9; --surface3:#e4eaf4;
  --border:#e4e9f2; --border2:#cdd7e6;
  --cyan:#0e9bb5; --purple:#5b63f0; --green:#0f9d6b; --red:#e24a4a; --orange:#d6871a;
  --text:#1b2436; --text2:#4f5e78; --muted:#7a8aa4; --muted2:#c4cee0;

  --topbar-bg:rgba(255,255,255,.9);
  --glow1:rgba(91,99,240,.05); --glow2:rgba(14,155,181,.045);
  --grid-line:rgba(91,99,240,.035);
  --shadow-sm:0 2px 8px rgba(23,40,80,.08);
  --shadow-md:0 6px 22px rgba(23,40,80,.1);
  --shadow-lg:0 12px 40px rgba(23,40,80,.14);

  color-scheme:light;
}

/* ---------- DARK forced by the toggle (overrides the light media query) ---------- */
:root[data-theme="dark"]{
  --bg:#131824; --surface:#1b2233; --surface2:#222c40; --surface3:#2c3850;
  --border:#2a3550; --border2:#3a4868;
  --cyan:#38cde0; --purple:#8b8dff; --green:#34d399; --red:#f87171; --orange:#fbbf24;
  --text:#e9eef7; --text2:#a2b2cc; --muted:#6d80a0; --muted2:#3a4a66;

  --topbar-bg:rgba(19,24,36,.88);
  --glow1:rgba(124,131,255,.09); --glow2:rgba(56,205,224,.055);
  --grid-line:rgba(124,131,255,.02);
  --shadow-sm:0 2px 8px rgba(0,0,0,.3);
  --shadow-md:0 4px 20px rgba(0,0,0,.4);
  --shadow-lg:0 8px 40px rgba(0,0,0,.5);

  color-scheme:dark;
}

/* ---------- Structural overrides that the pages hardcoded to dark ---------- */
/* Body text becomes a clean sans; codes/scores keep their explicit monospace. */
html,body{font-family:var(--font-body);}

/* Topbar / overlays were hardcoded near-black; drive them from tokens so they flip. */
.topbar{background:var(--topbar-bg) !important;}
.bg-glow{background:
  radial-gradient(ellipse at 20% 30%,var(--glow1),transparent 55%),
  radial-gradient(ellipse at 80% 70%,var(--glow2),transparent 55%) !important;}
.grid{background-image:
  linear-gradient(var(--grid-line) 1px,transparent 1px),
  linear-gradient(90deg,var(--grid-line) 1px,transparent 1px) !important;}

/* Smooth the theme flip + nicer selection/scrollbar in both modes. */
body{transition:background-color .25s ease,color .25s ease;}
::selection{background:var(--purple);color:#fff;}
*{scrollbar-color:var(--border2) transparent;}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:8px;border:3px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-track{background:transparent;}

/* ---------- Theme toggle button (injected by theme.js) ---------- */
#gm-theme-toggle{
  position:fixed;right:16px;bottom:16px;z-index:9999;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border2);background:var(--surface);
  color:var(--text);cursor:pointer;font-size:1.15rem;line-height:1;
  box-shadow:var(--shadow-md);transition:transform .15s ease,background .2s ease,border-color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
#gm-theme-toggle:hover{transform:translateY(-2px) scale(1.05);border-color:var(--purple);}
#gm-theme-toggle:active{transform:scale(.95);}
@media print{#gm-theme-toggle{display:none;}}