/* ============================================================
   theme.css — See the Color · 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.

   KEY DEPARTURE FROM OTHER COURSES:
   - The canvas is LIGHT (warm off-white "paper"), not dark.
     --canvas-bg is the color-mixing ground, not a dark field.
   - Brand accent is refreshed to coral-magenta for this course.
   - Lesson colors are NEVER fixed tokens — every hue, tint,
     shade, or mix is computed live via hsl()/RGB math in JS.
     Fixed tokens are for UI chrome and annotation only.
   ============================================================ */

@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 — light "paper" surface, not dark ────────────────
     This is the color-mixing ground every module renders on.
     Warm off-white so color swatches read exactly as they
     would on real paper, a real screen UI, or a real print proof. */
  --canvas-bg:              #faf9f6;
  --canvas-bg-mid:          #f2f0ea;
  --canvas-bg-elevated:     #ffffff;
  --canvas-grid:            rgba(20, 18, 14, 0.06);
  --canvas-axis:            rgba(20, 18, 14, 0.22);
  --canvas-axis-label:      rgba(20, 18, 14, 0.55);
  --canvas-floor:           #f2f0ea;
  --canvas-border-strong:   rgba(20, 18, 14, 0.14);
  --canvas-border-subtle:   rgba(20, 18, 14, 0.08);

  /* ── TEXT ON CANVAS — dark text, light surface ───────────────
     Inverted from every other Deayan Academy course.
     Use --text-on-canvas (not --text-on-shell) for any
     text rendered on or near the canvas area. */
  --text-on-canvas:         #1c1a16;
  --text-on-canvas-dim:     #6b6558;
  --text-on-canvas-faint:   #a39c8c;

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

  /* ── SHELL (app frame — header / footer) — unchanged ────── */
  --shell-bg:               #111318;
  --shell-bg-mid:           #1a1e28;
  --shell-border:           rgba(255, 255, 255, 0.07);
  --shell-border-active:    rgba(232, 79, 130, 0.40);

  /* ── TEXT on chrome (light surfaces) — unchanged ─────────── */
  --text-primary:           #111827;
  --text-secondary:         #374151;
  --text-muted:             #6b7280;
  --text-faint:             #d1d5db;

  /* ── TEXT on shell (dark header/footer) — unchanged ─────── */
  --text-on-shell:          #e2e8f0;
  --text-on-shell-dim:      #94a3b8;

  /* ── PRIMARY ACCENT — coral-magenta (refreshed for this course)
     UI chrome only: buttons, focus rings, Free Mode toggle, links,
     badges, module cards. Never used for lesson color content.     */
  --accent:                 #e84f82;
  --accent-bright:          #f472a0;
  --accent-dim:             #9d2c58;
  --accent-soft:            rgba(232, 79, 130, 0.10);
  --accent-glow:            rgba(232, 79, 130, 0.30);
  --accent-glow-strong:     rgba(232, 79, 130, 0.55);

  /* ── ANNOTATION TOKENS ───────────────────────────────────────
     Used ONLY for selection rings, markers, pass/fail feedback,
     gamut boundaries, and other UI overlays. NEVER for any hue,
     tint, shade, mix, or swatch the student is meant to study.
     Lesson colors are always computed live via hsl()/RGB math. */
  --annotate-primary:       #1c1a16;   /* selection rings, wheel pointer  */
  --annotate-secondary:     #6b6558;   /* inactive markers                 */
  --annotate-success:       #1f9d55;   /* correct, valid harmony           */
  --annotate-danger:        #d1373f;   /* incorrect, contrast fail         */
  --annotate-info:          #2f6fed;   /* gamut lines, informational       */
  --annotate-warning:       #c9820a;   /* borderline contrast, caution     */

  /* ── ADDITIVE PRIMARY REFERENCE TOKENS (legend chips only) ──
     Used ONLY in Module 3 for UI legend labels. The actual
     mixing canvas always renders live-computed RGB.             */
  --light-red:              #ff3b30;
  --light-green:            #34c759;
  --light-blue:             #0a84ff;

  /* ── SUBTRACTIVE PRIMARY REFERENCE TOKENS (legend chips only)
     Used ONLY in Module 4 for UI legend labels.                 */
  --pigment-cyan:           #00b8d9;
  --pigment-magenta:        #e91e8c;
  --pigment-yellow:         #ffd60a;

  /* ── 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 — same upward revision as Reading the Market.
     Floor is --text-2xs for badges/captions only.
     Nothing a student needs to read is ever below --text-sm. */
  --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;

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

  /* ── ELEVATION ──────────────────────────────────────────────── */
  --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);
}