/* ============================================================
   theme.css — Reading the Market · Deayan Academy
   ============================================================
   CONTAINS ONLY:
     1. Google Fonts import
     2. CSS custom properties (full color + type + motion system)
     3. Scrollbar and selection styles

   RULES:
   - Never define font-family, hex colors, or scrollbar rules
     in any other file. Reference only the variables below.
   - Layout, spacing, and component geometry live in each file's
     own <style> block, keyed off these tokens.
   - 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) ──────────────────────────────────
     Deep charcoal-navy, not near-black. Candles, wicks, and grid
     lines all need real contrast headroom above and below them. */
  --canvas-bg:            #171c26;
  --canvas-bg-mid:        #1f2530;
  --canvas-bg-elevated:   #262d3a;
  --canvas-grid:          rgba(255, 255, 255, 0.07);
  --canvas-axis:          rgba(255, 255, 255, 0.28);
  --canvas-axis-label:    rgba(255, 255, 255, 0.55);
  --canvas-floor:         #1f2530;

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

  /* ── SHELL (app frame — header / footer / titlebar) ───────── */
  --shell-bg:             #111318;
  --shell-bg-mid:         #1a1e28;
  --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;
  --text-secondary:       #374151;
  --text-muted:           #6b7280;
  --text-faint:           #d1d5db;

  /* ── TEXT on shell / canvas (dark surfaces) ───────────────── */
  --text-on-shell:        #e2e8f0;
  --text-on-shell-dim:    #94a3b8;

  /* ── PRIMARY ACCENT — Indigo ───────────────────────────────
     Brand color, primary actions, the entry-price marker. */
  --accent:               #4f46e5;
  --accent-bright:        #818cf8;
  --accent-dim:           #312e81;
  --accent-soft:          rgba(79, 70, 229, 0.10);
  --accent-glow:          rgba(79, 70, 229, 0.30);
  --accent-glow-strong:   rgba(79, 70, 229, 0.55);

  /* ── MARKET DATA COLORS ─────────────────────────────────────
     The only namespace that varies per-course. These govern every
     chart, candle, and indicator in every module. Never deviate:
       bull candle   = green   |  bear candle    = red
       volume        = sky blue (never direction-colored)
       support       = emerald |  resistance     = rose
       entry         = indigo  |  stop-loss      = red
       take-profit   = green   |  fast MA        = amber
       slow MA       = violet
  */
  --candle-bull:          #22c55e;
  --candle-bull-bright:   #4ade80;
  --candle-bull-fill:     rgba(34, 197, 94, 0.16);
  --candle-bear:          #ef4444;
  --candle-bear-bright:   #f87171;
  --candle-bear-fill:     rgba(239, 68, 68, 0.16);
  --candle-wick:          rgba(226, 232, 240, 0.85);
  --candle-doji:          #94a3b8;

  --data-price:           #e2e8f0;
  --data-volume:          #60a5fa;
  --data-volume-dim:      rgba(96, 165, 250, 0.35);
  --data-ma-fast:         #fbbf24;
  --data-ma-slow:         #a78bfa;
  --data-support:         #34d399;
  --data-resistance:      #fb7185;
  --data-entry:           #4f46e5;
  --data-stop:            #ef4444;
  --data-target:          #22c55e;
  --data-neutral-line:    #94a3b8;
  --data-highlight:       #ec4899;
  --data-risk-zone:       rgba(239, 68, 68, 0.12);
  --data-reward-zone:     rgba(34, 197, 94, 0.12);

  /* ── 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 — larger across the board than earlier courses.
     Floor is --text-2xs, reserved for badges/captions only,
     never for content a student needs to read to follow a lesson. */
  --text-2xs:   0.78rem;   /* badge text, tiny captions ONLY          */
  --text-xs:    0.85rem;   /* step counter, dock labels, axis labels  */
  --text-sm:    0.95rem;   /* secondary body, FAQ items, drill options*/
  --text-base:  1.05rem;   /* primary tour panel body copy            */
  --text-lg:    1.25rem;   /* step headline                           */
  --text-xl:    1.45rem;   /* module title (inside topbar)            */
  --text-2xl:   1.85rem;   /* canvas HUD dramatic emphasis             */
  --text-3xl:   2.35rem;   /* the single biggest number on screen      */

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

  /* ── ELEVATION (chrome surfaces) ───────────────────────────── */
  --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);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 480ms;
}


/* ── Scrollbar — WebKit ────────────────────────────────────────── */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-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);
}