/* ═══════════════════════════════════════════════════════════
   EduSpark — Design Tokens
   vars.css · Single source of truth for all CSS custom properties.
   Load this file FIRST before any other EduSpark stylesheet.
   ═══════════════════════════════════════════════════════════ */

:root {

  /* ── Geometry ── */
  --sidebar-w:  260px;
  --nav-w:      256px;
  --sidebar:    #0f172a;
  --radius-sm:  8px;
  --radius:     12px;
  --radius-lg:  16px;
  --radius-xl:  24px;

  /* ── Base surface ── */
  --bg:       #f4f6fc;
  --white:    #ffffff;
  --card:     #ffffff;
  --panel:    #eef1f8;

  /* ── Borders ── */
  --border:   #e2e8f4;
  --border2:  #cdd5e8;

  /* ── Typography colours ── */
  --text:     #1a202c;
  --text2:    #4a5568;
  --text3:    #94a3b8;

  /* ── Brand accent (blue) ── */
  --accent:   #2563eb;
  --accent-h: #1d4ed8;
  --accent-l: #eff6ff;

  /* ── Purple ── */
  --purple:   #7c3aed;
  --purple-h: #6d28d9;
  --purple-l: #f5f3ff;

  /* ── Semantic colours ── */
  --green:    #059669;
  --green-l:  #ecfdf5;
  --red:      #dc2626;
  --red-l:    #fef2f2;
  --orange:   #ea580c;
  --orange-l: #fff7ed;
  --yellow:   #d97706;
  --yellow-l: #fffbeb;
  --cyan:     #0891b2;
  --cyan-l:   #ecfeff;
  --teal:     #0f766e;
  --teal-l:   #f0fdfa;

  /* ── Typography stacks ── */
  --sans:    'DM Sans', sans-serif;
  --display: 'Syne', sans-serif;
  --mono:    'JetBrains Mono', monospace;

  /* ── Elevation ── */
  --shadow:    0 1px 4px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 16px 50px rgba(0,0,0,0.11);

  /* ── Compatibility aliases ─────────────────────────────────
     These map legacy variable names (teacher / institution portal CSS)
     to the canonical tokens above so existing code keeps working
     without a find-replace sweep.
  ─────────────────────────────────────────────────────────── */
  --surface:       var(--card);
  --surface2:      var(--panel);
  --input-bg:      var(--card);
  --nav-bg:        var(--card);
  --nav-text:      var(--text);
  --muted:         var(--text2);
  --accent-hover:  var(--accent-h);
  --accent-light:  var(--accent-l);
  --violet:        var(--purple);
  --violet-l:      var(--purple-l);
  --violet-light:  var(--purple-l);
  --green-light:   var(--green-l);
  --red-light:     var(--red-l);
  --orange-light:  var(--orange-l);
  --yellow-light:  var(--yellow-l);
}


/* ── Dark theme ───────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:       #0f1117;
  --white:    #1a1d27;
  --sidebar:  #080c14;
  --card:     #1a1d27;
  --panel:    #1e2130;
  --border:   #2d3148;
  --border2:  #3a3f5c;
  --text:     #e2e8f0;
  --text2:    #94a3b8;
  --text3:    #64748b;
  --input-bg: var(--panel);
  --nav-bg:   #13151f;

  /* Tinted surface colours in dark mode */
  --accent-l: #1e2f5e;
  --purple-l: #1e1040;
  --green-l:  #052e1b;
  --red-l:    #2d0e0e;
  --orange-l: #2d1500;
  --yellow-l: #2d2000;
  --cyan-l:   #0a1f2d;
  --teal-l:   #042f2e;

  --shadow:    0 1px 4px rgba(0,0,0,0.3),  0 2px 8px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg: 0 16px 50px rgba(0,0,0,0.5);
}


/* ── System preference fallback ───────────────────────────── */
/* Only kicks in if the user hasn't manually set a theme via JS */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg:       #0f1117;
    --white:    #1a1d27;
    --sidebar:  #080c14;
    --card:     #1a1d27;
    --panel:    #1e2130;
    --border:   #2d3148;
    --border2:  #3a3f5c;
    --text:     #e2e8f0;
    --text2:    #94a3b8;
    --text3:    #64748b;
    --input-bg: var(--panel);
    --nav-bg:   #13151f;
    --accent-l: #1e2f5e;
    --purple-l: #1e1040;
    --green-l:  #052e1b;
    --red-l:    #2d0e0e;
    --orange-l: #2d1500;
    --yellow-l: #2d2000;
    --cyan-l:   #0a1f2d;
    --teal-l:   #042f2e;
    --shadow:    0 1px 4px rgba(0,0,0,0.3),  0 2px 8px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.4);
    --shadow-lg: 0 16px 50px rgba(0,0,0,0.5);
  }
}