/* ============================================================
   Liminal — Design Tokens

   Dark is the only theme. The physical use case (headphones, dimmed
   room, night-dominant, deliberate intent) forces it. Tokens live on
   :root so the app renders dark regardless of any stale `data-theme`
   value left in a returning user's localStorage.
   ============================================================ */

/* ── Scale system ──────────────────────────────────────────────
   Type and spacing scales. Colors live in the theme blocks below;
   these are theme-independent and define the rhythm of the UI.

   Type: 1.25 ratio anchored at 1rem body. Use these instead of
   ad-hoc rem values so headings reliably out-rank body text.
   Spacing: 4px base grid. Use --space-* for padding/margin/gap.
   ============================================================ */
:root {
  /* Type scale */
  --text-2xs:  0.6875rem; /* 11px — micro labels, badges */
  --text-xs:   0.75rem;   /* 12px — eyebrows, captions */
  --text-sm:   0.875rem;  /* 14px — secondary / dense body */
  --text-base: 1rem;      /* 16px — body */
  --text-md:   1.125rem;  /* 18px — card titles, primary CTA */
  --text-lg:   1.375rem;  /* 22px — section headings */
  --text-xl:   1.75rem;   /* 28px — page sub-heads */
  --text-2xl:  2.25rem;   /* 36px — hero */
  --text-display: 3rem;   /* 48px: giant numerals (streak count, orb readouts) */

  /* Spacing scale (4px grid) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  /* Rhythm between major dashboard sections — breathes on wide screens */
  --space-section: clamp(1.5rem, 3vw, 2.5rem);

  /* Radii */
  /* Three radii, site-wide (spec: docs/superpowers/specs/2026-09-23-design-system-cohesion-design.md).
     There were 36 in use. */
  --radius-sm: 8px;      /* inputs, tags, small controls */
  --radius-md: 14px;
  --radius-pill: 999px;  /* every button, chip and tab */
  --radius-lg: var(--radius-md); /* retired: kept as an alias so existing uses do not break */
  --radius-hero: 20px;   /* Ink & Coral: home hero */
  --radius-sheet: 26px;  /* Ink & Coral: bottom sheets, top corners */

  /* Logo height, every placement. The sidebar logo was 65x24px and the paywall's 20px; the owner
     flagged the logo as too small twice, so it sizes from one token that a test pins at >= 44px. */
  --logo-h: 44px;
  --logo-h-lg: 52px;  /* onboarding hero on desktop */

  /* Minimum interactive touch target (PRODUCT.md a11y requirement) */
  --tap-min: 44px;

  /* Fixed bottom zone-nav height; overridden to its real height in the
     mobile media block (App.css). 0 on desktop where the nav is in-panel. */
  --bottom-nav-h: 0px;

  /* Brainwave band hues — semantic across the app (zone bars, stage
     timelines, education tables). lib/bands.ts reads these via lib/themeTokens.ts. */
  --band-delta: #8f86e8;
  --band-theta: #f08aae;
  --band-alpha: #3fb3a3;
  --band-beta:  #f2b632;
  --band-gamma: #f5953c;

  /* Font stacks (design handoff 00-tokens) */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;
}

:root,
[data-theme="dark"] {
  --bg-app:         #171411;
  --bg-page:        #1c1916;
  --bg-panel:       #201d19;
  --bg-panel-solid: #201d19;
  --bg-card:        #2a2521;
  --bg-input:       #2a2521;
  --bg-section:     #25211d;
  --border-card:    #463f37;
  --border-section: #463f37;
  --border-strong:  #352f29;
  /* Aliases used in modes components */
  --surface:        #25211d;
  --surface-2:      #2a2521;
  --border:         #463f37;
  --text-primary:   #f3e9d4;
  --text-secondary: #bfb4a2;
  --text-tertiary:  #a99e8c;
  /* Soft body text on dark art/gradient surfaces (16e: quick-card subs,
     recent notes, weekly-insight copy) */
  --text-soft:      #d6cab5;
  --text-muted:     #a49988;
  --text-label:     #f2b632;
  --text-disabled:  #5b5247;
  --accent:         #bf4a26;
  --accent-hover:   #b3431f;
  --accent-deep:    #9a3a1c;
  --accent-light:   #3d2519;
  --accent-bright:  #f06c40; /* bright coral: marks with no text or glyph (progress, tab bar, dots, links). Cream text and play glyphs sit on --accent */
  --accent-text:    var(--accent-bright); /* coral text and line icons on dark surfaces (TestFlight 33: the deep fill read too dark as text) */
  --bg-raised:      #302b26; /* mini player, selected plan */
  /* 16e gradient panel endpoints (Smart Session, 7-day, Your week) */
  --bg-grad-hi:     #28231e;
  --bg-grad-lo:     #211d19;
  /* 16e desktop chrome — sidebar/top-bar surfaces and right-rail panels */
  --bg-deep:        #171411;
  --border-deep:    #302b26;
  --bg-panel-2:     #201d19;
  --border-panel-2: #3d362f;
  --nav-active-border: #463f37;
  --readout-bg:     #2a2521;
  --readout-border: #463f37;
  --shadow-panel:   rgba(0, 0, 0, 0.5);
  --slider-track:   rgba(255, 255, 255, 0.18);
  --danger:         #e5484d;
  --danger-hover:   #cc3d42;
  --danger-bg:      #2b1416;
  --danger-border:  #6b2a2e;
  --danger-text:    #f5a3a5;
  /* Brand gold — achievement, Pro tier, streak milestones (not decorative) */
  --gold:           #e9b949;
  --gold-bright:    #f2c55a;
  /* Text/icon color that sits on top of the accent fill */
  --on-accent:      #fff4e6;
  /* Light text over photos and illustrated cards; never use --on-accent there */
  --on-image:       #fff4e6;
  /* Mini-player source chip hues */
  --chip-noise:     #8f86e8;
  --chip-music:     #3fb3a3;
  /* Smart session phase hues — Arrival → Shift → Return */
  --phase-arrival:  #8f86e8;
  --phase-shift:    #3fb3a3;
  --phase-return:   #f08aae;
  --phase-fallback: #888888;

  /* Neutrals: shadows, scrims, highlights (mix with transparent for alpha) */
  --black: #000000;
  --white: #ffffff;
  --scrim: #0a0908;
  --scrim-soft: #0e0c0a;
  --grey: #888888;
  --grey-light: #aaaaaa;

  /* Status */
  --success: #4ade80;
  --success-strong: #22c55e;
  --success-text: #86efac;
  --warning: #fbbf24;
  --warning-orange: #e08c3a;
  --warning-orange-text: #c8843a;
  --caution: #facc15;
  --caution-strong: #eab308;
  --caution-text: #fde047;
  --error: #f87171;
  --error-strong: #ef4444;
  --indigo: #6366f1;
  --indigo-text: #a5b4fc;
  --purple: #a855f7;
  --purple-text: #c084fc;
  --like: #e05b7a;

  /* Content hues */
  --noise-pink: #e08bb4;
  --noise-brown: #b5825a;
  --noise-violet: #9b6fd0;
  --gold-shade: #a07830;
  --gold-shade-deep: #8a6f20;
  --ink-on-gold: #1a120a;
  --ink-on-gold-deep: #1a1205;
  --aura-text: #f4f2ff;
  --aura-glow: #c8bef0;
  --stream-pro-text: #a89de8;
  --stream-reconnect: #4a9eda;
  --stream-reconnect-text: #7ab8e8;
  --art-lofi-1: #2a1a0e;
  --art-lofi-2: #3d2510;
  --art-lofi-3: #0f0905;
  --art-ambient-1: #0d1b2e;
  --art-ambient-2: #162640;
  --art-ambient-3: #060d18;
  --art-meditation-1: #1a0d2e;
  --art-meditation-2: #261540;
  --art-meditation-3: #0a061a;
  --art-sleep-1: #05080f;
  --art-sleep-2: #0a0e1a;
  --art-sleep-3: #020408;
  --pad-rec: #c0392b;
  --pad-rec-hover: #a93226;
  --pad-rec-text: #e05252;
  --pad-overdub: #6c5ce7;
  --pad-overdub-hover: #5a4dd1;
  --pad-armed: #e74c3c;
  --pad-armed-hover: #d6432f;

  /* Content hues: modes, breath, pad, visualizers */
  --amber: #e8b84b;
  --hue-violet: #9b59b6;
  --hue-saffron: #f4c430;
  --hue-slate: #6a5acd;
  --hue-indigo-deep: #4b3b8f;
  --breath-calm: #6ee7b7;
  --breath-sleep: #c4b5fd;
  --breath-balance: #f9a8d4;
  --info: #60a5fa;
  --info-text: #93c5fd;
  --info-bg: #1e3a5f;
  --warning-strong: #d97706;
  --warning-text: #fde68a;
  --warning-bg: #78350f;
  --success-bg: #166534;
  --grey-pale: #dddddd;
  --pad-metallic: #4fc3f7;
  --pad-rhythmic: #ffb74d;
  --pad-textural: #9c8fd4;
  --vu-clip: #e05555;
  --visual-violet-2: #d7aefb;
  --visual-violet-3: #e8d5ff;
  --visual-gold-1: #c8960c;
  --visual-gold-3: #fffacd;
  --visual-void-1: #00ff88;
  --visual-void-2: #00ccff;
  --visual-void-3: #ff00ff;

  /* Moodifier moods (data/moodifier.ts) */
  --mood-angry: #c86d3f;
  --mood-anxious: #c3b34b;
  --mood-sad: #6e86a3;
  --mood-stressed: #b7775a;
  --mood-overwhelmed: #8b6f64;
  --mood-restless: #c59a52;
  --mood-burned-out: #877c70;
  --mood-confused: #8e8d64;
  --mood-lonely: #668a88;
  --mood-guilty: #997067;
  --mood-ashamed: #8f615c;
  --mood-numb: #6d7b79;
  --mood-heartbroken: #7d7aa3;
  --mood-unfocused: #8f8858;
  --mood-calm: #6ba07d;
  --mood-focused: #d1ae54;
  --mood-loved: #d78a7d;
  --mood-grounded: #7e9a72;
  --mood-clear: #8ec2b9;
  --mood-sleepy: #7988b8;
  --mood-recharged: #d8b251;
  --mood-peaceful: #8cb4a2;
  --mood-inspired: #cab865;
  --mood-hopeful: #d49c66;
  --mood-connected: #78a5a3;
  --mood-relaxed: #7ea89d;
  --mood-meditative: #7f86b7;
}