/* ================================================================
   tokens.css — Inspire Academic subject-page design tokens
   Phase 2 extraction, source of truth: subjects/physics.html
   (the canonical v2.0 build all four subject pages were cloned from).

   RULE: components.css and global.css only ever consume these
   custom properties — they never hardcode a colour that belongs
   here. Each subject page overrides the SUBJECT ACCENT TOKENS
   block in its own inline <style>, declared after this file is
   linked, so its values win the cascade. Nothing else should be
   redefined per page.
   ================================================================ */

:root {
  /* Layout */
  --sidebar-width: 256px;
  --radius: 20px;
  --radius-sm: 12px;

  /* Motion */
  --transition: .2s cubic-bezier(.4,0,.2,1);
  --spring-out: cubic-bezier(.34,1.56,.64,1);
  --spring-in:  cubic-bezier(.36,0,.66,-.56);

  /* Typography */
  --font-display: 'Fraunces', serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* Brand — identical on every subject page */
  --gold: #c9a84c;
  --gold-rgb: 201,168,76;
  --grad-gold: linear-gradient(135deg, #c9a84c, #e8c96a);
  --danger: #f97316;
  --success: #22c55e;

  /* ============================================================
     SUBJECT ACCENT TOKENS — placeholders only.
     Each subject page's own inline <style> re-declares these 9
     custom properties on :root with its own accent pair. The
     values below (physics' blue/cyan) apply only if a page
     forgets to override them.
     ============================================================ */
  --blue:            #1d4ed8;
  --blue-mid:        #2563eb;
  --cyan:            #0891b2;
  --cyan-bright:     #06b6d4;
  --blue-rgb:        29,78,216;
  --blue-mid-rgb:    37,99,235;
  --cyan-bright-rgb: 6,182,212;
  --grad-physics:       linear-gradient(135deg, var(--blue), var(--cyan-bright));
  --grad-physics-vivid: linear-gradient(135deg, var(--blue-mid) 0%, var(--cyan) 50%, var(--cyan-bright) 100%);
}

/* ================================================================
   THEME SURFACE TOKENS
   Dark mode is fully neutral (white/black-based alphas) and
   identical for every subject. Light mode intentionally tints
   --bg-hover, --border, --border-strong, --progress-track,
   --shadow, --shadow-card and --card-3d-bottom with the active
   subject's own accent colour via --blue-rgb — that tint is the
   only thing that changes per subject in light mode.
   ================================================================ */

[data-theme="dark"] {
  --bg:              #0b1628;
  --bg-deep:         #07101e;
  --bg-panel:        rgba(13,28,56,.75);
  --bg-card:         rgba(255,255,255,.045);
  --bg-hover:        rgba(255,255,255,.07);
  --border:          rgba(255,255,255,.09);
  --border-strong:   rgba(255,255,255,.16);
  --text:            #f0f6ff;
  --text-muted:      rgba(240,246,255,.58);
  --text-soft:       rgba(240,246,255,.55);
  --sidebar-bg:      #060e1b;
  --sidebar-border:  rgba(255,255,255,.07);
  --progress-track:  rgba(255,255,255,.08);
  --search-bg:       rgba(255,255,255,.06);
  --shadow:          0 20px 60px rgba(0,0,0,.45);
  --shadow-card:     0 6px 28px rgba(0,0,0,.3);
  --card-3d-top:     rgba(255,255,255,.06);
  --card-3d-bottom:  rgba(0,0,0,.25);
}

[data-theme="light"] {
  --bg:              #eef2f9;
  --bg-deep:         #e4eaf5;
  --bg-panel:        #ffffff;
  --bg-card:         #ffffff;
  --bg-hover:        rgba(var(--blue-rgb),.06);
  --border:          rgba(var(--blue-rgb),.12);
  --border-strong:   rgba(var(--blue-rgb),.22);
  --text:            #0d1929;
  --text-muted:      rgba(13,25,41,.65);
  --text-soft:       rgba(13,25,41,.38);
  --sidebar-bg:      #ffffff;
  --sidebar-border:  rgba(0,0,0,.07);
  --progress-track:  rgba(var(--blue-rgb),.1);
  --search-bg:       #ffffff;
  --shadow:          0 20px 60px rgba(var(--blue-rgb),.12);
  --shadow-card:     0 4px 20px rgba(var(--blue-rgb),.09);
  --card-3d-top:     rgba(255,255,255,.9);
  --card-3d-bottom:  rgba(var(--blue-rgb),.06);
}