/* ============================================================
   theme.css — Compounding, Interest & Debt · Deayan Academy
   Track D: Finance · 2026
   ============================================================
   CONTAINS ONLY:
     1. Google Fonts import
     2. CSS custom properties (full color + motion system)
     3. Scrollbar styles

   RULES:
   - Never define font-family, hex colors, or scrollbar rules
     in any other file. Reference only the variables below.
   - Layout, spacing, component geometry → each file's own <style>.
   - Changing anything here propagates to every module instantly.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {

  /* ── CANVAS (dark workspace) ─────────────────────────────── */
  --canvas-bg:           #0f1117;   /* main canvas / scene background    */
  --canvas-bg-mid:       #161a24;   /* slightly raised layers in canvas  */
  --canvas-grid:         rgba(255, 255, 255, 0.05);
  --canvas-axis:         rgba(255, 255, 255, 0.20);
  --canvas-axis-label:   rgba(255, 255, 255, 0.35);
  --canvas-floor:        #161a24;   /* x-axis / baseline area in charts  */

  /* ── CHROME (light panel surfaces) ──────────────────────── */
  --chrome-bg:           #f4f5f7;   /* tour panel, control dock bg       */
  --chrome-bg-deep:      #eceef2;   /* inset / pressed surfaces          */
  --chrome-bg-hover:     #e4e7ed;   /* hover state on chrome             */
  --chrome-border:       #d8dce6;   /* panel dividers, card borders      */
  --chrome-border-subtle:#e8eaf0;   /* very light structural lines       */

  /* ── SHELL (the app frame — header / footer / titlebar) ─── */
  --shell-bg:            #111318;   /* header + footer background        */
  --shell-bg-mid:        #1a1e28;   /* titlebar / sub-bars               */
  --shell-border:        rgba(255, 255, 255, 0.07);
  --shell-border-active: rgba(79, 70, 229, 0.40);

  /* ── TEXT on chrome (light surfaces) ────────────────────── */
  --text-primary:        #111827;   /* headings, body — 16.7:1 on chrome */
  --text-secondary:      #4b5563;   /* sub-copy — 7.0:1 on chrome        */
  --text-muted:          #9ca3af;   /* captions, labels                  */
  --text-faint:          #d1d5db;   /* dividers used as text             */

  /* ── TEXT on shell (dark surfaces) ──────────────────────── */
  --text-on-shell:       #e2e8f0;   /* primary text on header/footer     */
  --text-on-shell-dim:   #64748b;   /* muted text on header/footer       */

  /* ── PRIMARY ACCENT — Indigo ─────────────────────────────── */
  /* Course-wide role: brand color, primary actions,           */
  /* progress indicators, outstanding balance.                 */
  --accent:              #4f46e5;
  --accent-bright:       #818cf8;   /* canvas labels, glow effects       */
  --accent-dim:          #312e81;   /* dark variant for canvas use       */
  --accent-soft:         rgba(79, 70, 229, 0.10);   /* tint fills        */
  --accent-glow:         rgba(79, 70, 229, 0.30);   /* glow shadows      */
  --accent-glow-strong:  rgba(79, 70, 229, 0.55);

  /* ── SECONDARY ACCENT — Amber ───────────────────────────── */
  /* Course-wide role: cash flow events, payments, EMI.        */
  --amber:               #d97706;
  --amber-bright:        #fbbf24;
  --amber-dim:           #78350f;
  --amber-soft:          rgba(217, 119, 6, 0.10);
  --amber-glow:          rgba(217, 119, 6, 0.30);
  --amber-glow-strong:   rgba(217, 119, 6, 0.55);

  /* ── TERTIARY — Emerald ──────────────────────────────────── */
  /* Course-wide role: principal, savings, "money you own".    */
  --emerald:             #059669;
  --emerald-bright:      #34d399;
  --emerald-soft:        rgba(5, 150, 105, 0.10);
  --emerald-glow:        rgba(5, 150, 105, 0.30);

  /* ── TERTIARY — Orange ───────────────────────────────────── */
  /* Course-wide role: interest cost, loss, "money leaving".   */
  --orange:              #ea580c;
  --orange-bright:       #f97316;
  --orange-soft:         rgba(249, 115, 22, 0.10);
  --orange-glow:         rgba(249, 115, 22, 0.30);

  /* ── TERTIARY — Rose ─────────────────────────────────────── */
  /* Course-wide role: alerts, danger, error states.           */
  --rose:                #e11d48;
  --rose-bright:         #fb7185;
  --rose-soft:           rgba(225, 29, 72, 0.10);

  /* ── TERTIARY — Sky ──────────────────────────────────────── */
  /* Course-wide role: reference lines, neutral projections.   */
  --sky:                 #0284c7;
  --sky-bright:          #60a5fa;
  --sky-soft:            rgba(2, 132, 199, 0.10);

  /* ── FINANCE DATA COLORS ─────────────────────────────────── */
  /* These tokens govern every chart, bar, and curve in every  */
  /* module of this course. The rules are absolute:            */
  /*   principal = emerald  (the original money)               */
  /*   interest  = orange   (the cost)                         */
  /*   balance   = indigo   (outstanding amount)               */
  /*   payment   = amber    (cash flow event / EMI)            */
  /* Never deviate. A student should read any chart from any   */
  /* module and immediately know what each color means.        */
  --data-principal:      #34d399;   /* emerald — original money / reduces debt */
  --data-interest:       #f97316;   /* orange  — cost of borrowing             */
  --data-balance:        #818cf8;   /* indigo  — outstanding balance           */
  --data-payment:        #fbbf24;   /* amber   — cash flow / EMI event         */
  --data-savings:        #34d399;   /* emerald — same family as principal      */
  --data-loss:           #f97316;   /* orange  — same family as interest       */
  --data-neutral:        #60a5fa;   /* sky     — reference lines, scenario B   */
  --data-highlight:      #ec4899;   /* pink    — emphasis, "watch this moment" */
  --data-bar-fill:       rgba(52, 211, 153, 0.18);   /* translucent principal bars  */
  --data-bar-interest:   rgba(249, 115, 22, 0.20);   /* translucent interest bars   */
  --data-line-projection:rgba(96, 165, 250, 0.50);   /* dashed projection lines     */

  /* ── SEMANTIC ────────────────────────────────────────────── */
  --success:             #059669;
  --warning:             #d97706;
  --danger:              #dc2626;

  /* ── TYPOGRAPHY ─────────────────────────────────────────── */
  --font-display:  'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:     'Space Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Type scale */
  --text-xs:    0.68rem;   /* step counter, dock labels, captions      */
  --text-sm:    0.82rem;   /* secondary body, tour sub-text, FAQ items */
  --text-base:  0.95rem;   /* primary tour panel body copy             */
  --text-lg:    1.10rem;   /* step headline                            */
  --text-xl:    1.28rem;   /* module title (inside topbar)             */
  --text-2xl:   1.60rem;   /* canvas HUD dramatic emphasis             */

  /* ── SHAPE ───────────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ── ELEVATION (chrome surfaces only) ───────────────────── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:  0 12px 32px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);

  /* ── MOTION ──────────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);   /* slight overshoot */
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 480ms;
}


/* ── Scrollbar — WebKit ──────────────────────────────────────── */
::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: transparent; border-radius: var(--radius-pill); }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb  {
  background: var(--chrome-border);
  border-radius: var(--radius-pill);
  transition: background var(--duration-base);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Scrollbar — Firefox ─────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--chrome-border) transparent; }

/* ── Text selection ──────────────────────────────────────────── */
::selection {
  background: var(--accent-soft);
  color: var(--accent);
}