/* ============================================================
   theme.css — Grow Your Money · Deayan Academy
   ============================================================ */

@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 {

  /* ══════════════════════════════════════════════════════════
     SECTION 1: COURSE PALETTE — GROW YOUR MONEY
     ══════════════════════════════════════════════════════════ */

  /* ── 1. Primary Accent (Confident Green — UI Chrome Only) ── */
  --accent:                 #16a34a;
  --accent-bright:          #22c55e;
  --accent-dim:             #14532d;
  --accent-soft:            rgba(22, 163, 74, 0.10);
  --accent-glow:            rgba(22, 163, 74, 0.30);
  --accent-glow-strong:     rgba(22, 163, 74, 0.55);

  /* ── 2. Financial Semantic Tokens (Fixed meaning across all 20 modules) ── */
  --data-gain:              #22c55e;   /* Green for gain / appreciation */
  --data-gain-fill:         rgba(34, 197, 94, 0.16);
  --data-loss:              #ef4444;   /* Red for loss / drawdown */
  --data-loss-fill:         rgba(239, 68, 68, 0.14);
  --data-principal:         #64748b;   /* Slate for original contribution */
  --data-principal-fill:    rgba(100, 116, 139, 0.16);
  --data-interest:          #f59e0b;   /* Amber for interest / growth portion */
  --data-interest-fill:     rgba(245, 158, 11, 0.16);
  --data-inflation:         #dc2626;   /* Warning red for purchasing power erosion */
  --data-benchmark:         #8b5cf6;   /* Violet for comparison / index line */
  --data-highlight:         #0ea5e9;   /* Sky blue for selected / active series */

  /* ── 3. Annotation Base Tokens ── */
  --annotate-success:       var(--data-gain);
  --annotate-danger:        var(--data-loss);
  --annotate-info:          var(--data-highlight);
  --annotate-warning:       var(--warning);

  /* ── 4. Default Canvas Tokens (Used by index.html & fallback) ── */
  --canvas-bg:              #0d1117;
  --canvas-bg-mid:          #161b22;
  --canvas-bg-elevated:     #1c2128;
  --canvas-grid:            rgba(255, 255, 255, 0.05);
  --canvas-axis:            rgba(255, 255, 255, 0.18);
  --canvas-axis-label:      rgba(255, 255, 255, 0.45);
  --canvas-floor:           #161b22;
  --canvas-border-strong:   rgba(255, 255, 255, 0.12);
  --canvas-border-subtle:   rgba(255, 255, 255, 0.07);

  --text-on-canvas:         #e6edf3;
  --text-on-canvas-dim:     #8b949e;
  --text-on-canvas-faint:   #545d68;

  --annotate-primary:       #e6edf3;
  --annotate-secondary:     #8b949e;


  /* ══════════════════════════════════════════════════════════
     SECTION 2: FIXED CORE SYSTEM (DO NOT EDIT BELOW THIS LINE)
     100% Identical Across All Deayan Academy Courses
     ══════════════════════════════════════════════════════════ */

  /* ── Chrome (Light panel surfaces) ── */
  --chrome-bg:              #f4f5f7;
  --chrome-bg-deep:         #eceef2;
  --chrome-bg-hover:        #e4e7ed;
  --chrome-border:          #d8dce6;
  --chrome-border-subtle:   #e8eaf0;

  /* ── Shell (Outer app frame) ── */
  --shell-bg:               #111318;
  --shell-bg-mid:           #1a1e28;
  --shell-border:           rgba(255, 255, 255, 0.07);
  --shell-border-active:    rgba(22, 163, 74, 0.40);

  /* ── Text on Chrome ── */
  --text-primary:           #111827;
  --text-secondary:         #374151;
  --text-muted:             #6b7280;
  --text-faint:             #d1d5db;

  /* ── Text on Shell ── */
  --text-on-shell:          #e2e8f0;
  --text-on-shell-dim:      #94a3b8;

  /* ── Semantic ── */
  --success:                #16a34a;
  --warning:                #d97706;
  --danger:                 #dc2626;

  /* ── Typography System ── */
  --font-display:  'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:     'Space Mono', 'Fira Code', monospace;
  --text-2xs:   0.78rem;
  --text-xs:    0.85rem;
  --text-sm:    0.95rem;
  --text-base:  1.05rem;
  --text-lg:    1.25rem;
  --text-xl:    1.45rem;
  --text-2xl:   1.85rem;
  --text-3xl:   2.35rem;

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

  --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.14), 0 4px 8px rgba(0,0,0,0.08);

  /* ── Motion ── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 480ms;
}

/* ══════════════════════════════════════════════════════════════
   DARK CANVAS token set — active when <body class="canvas-theme-dark">
   Used for: Modules 01, 02, 03, 04, 07, 10, 11, 12, 15, 19
   ══════════════════════════════════════════════════════════════ */
body.canvas-theme-dark {
  --canvas-bg:              #0d1117;
  --canvas-bg-mid:          #161b22;
  --canvas-bg-elevated:     #1c2128;
  --canvas-grid:            rgba(255, 255, 255, 0.05);
  --canvas-axis:            rgba(255, 255, 255, 0.18);
  --canvas-axis-label:      rgba(255, 255, 255, 0.45);
  --canvas-floor:           #161b22;
  --canvas-border-strong:   rgba(255, 255, 255, 0.12);
  --canvas-border-subtle:   rgba(255, 255, 255, 0.07);

  --text-on-canvas:         #e6edf3;
  --text-on-canvas-dim:     #8b949e;
  --text-on-canvas-faint:   #545d68;

  --annotate-primary:       #e6edf3;
  --annotate-secondary:     #8b949e;
}

/* ══════════════════════════════════════════════════════════════
   LIGHT CANVAS token set — active when <body class="canvas-theme-light">
   Used for: Modules 05, 06, 08, 09, 13, 14, 16, 17, 18, 20
   ══════════════════════════════════════════════════════════════ */
body.canvas-theme-light {
  --canvas-bg:              #f7f8fa;
  --canvas-bg-mid:          #eef0f4;
  --canvas-bg-elevated:     #ffffff;
  --canvas-grid:            rgba(17, 24, 39, 0.05);
  --canvas-axis:            rgba(17, 24, 39, 0.20);
  --canvas-axis-label:      rgba(17, 24, 39, 0.50);
  --canvas-floor:           #eef0f4;
  --canvas-border-strong:   rgba(17, 24, 39, 0.12);
  --canvas-border-subtle:   rgba(17, 24, 39, 0.07);

  --text-on-canvas:         #111827;
  --text-on-canvas-dim:     #6b6558;
  --text-on-canvas-faint:   #9ca3af;

  --annotate-primary:       #111827;
  --annotate-secondary:     #6b7280;
}

/* ── Universal Scrollbars & Selection ── */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--chrome-border); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
* { scrollbar-width: thin; scrollbar-color: var(--chrome-border) transparent; }

::selection {
  background: var(--accent-soft);
  color: var(--accent);
}