/* ==========================================================================
   SPIDIFY DESIGN SYSTEM TOKENS
   Canonical Shared Tokens for Landing, Presentation Slides & Studio
   Aesthetic DNA: Hardware Console + VisionOS Dark Glass + Neon Kinetic Accents
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Space+Grotesk:wght@600;700;800&display=swap');

:root {
  /* ─── Studio Shell Dimensions ─── */
  --header-h: 56px;
  --timeline-h: 215px;
  --stage-ratio: 9/16;
  --stage-inv-ratio: calc(16 / 9);

  /* ─── Base Surfaces (Hardware Console Obsidian & Brushed Gunmetal) ─── */
  --bg-base: #0A0A0C;               /* Matte Obsidian floor */
  --bg: #0A0A0C;
  --surface-0: #0A0A0C;             /* Deepest canvas floor */
  --surface-1: #111116;             /* Brushed Gunmetal base (rackmounts, header) */
  --surface-2: #17171F;             /* Elevated cards, tool groups, drawer panels */
  --surface-3: #22222E;             /* Active states, input wells, hover fills */
  --surface-glass: rgba(20, 20, 28, 0.75); /* VisionOS dark glass */
  --surface-glass-heavy: rgba(14, 14, 20, 0.92);
  --surface-glass-pill: rgba(255, 255, 255, 0.07);

  /* Semantic Mappings & Aliases */
  --bg-surface: var(--surface-1);
  --bg-rack: var(--surface-1);
  --bg-rack-elevated: var(--surface-2);
  --bg-glass: var(--surface-glass);
  --bg-glass-heavy: var(--surface-glass-heavy);
  --bg-glass-pill: var(--surface-glass-pill);

  /* ─── Signature Neon Accents ─── */
  --neon-cyan: #00F5FF;             /* Primary CTA, active channels, waveform peaks, live tracking */
  --cyan: #00F5FF;
  --accent: #00F5FF;                /* Primary signature studio Electric Cyan */
  --accent-cyan: #00F5FF;
  --accent-hover: #38F9FF;          /* Lighter cyan hover glow */
  --accent-light: #70FFFF;
  --neon-lime: #D4FF00;             /* Playback indicators, high-frequency metrics, energetic highlights */
  --lime: #D4FF00;
  --accent-lime: #D4FF00;
  --neon-violet: #8B5CF6;           /* Secondary actions, pitch shift, FX depth */
  --accent-violet: #8B5CF6;
  --neon-pink: #FF3366;             /* Record states, mute toggles, hot clipping warnings */
  --crimson: #FF3366;
  --accent-pink: #FF3366;
  --neon-emerald: #10B981;          /* Success, saved states, master headroom */
  --emerald: #10B981;
  --mint: #10B981;
  --accent-emerald: #10B981;
  --playhead: #FFB020;              /* Amber playhead marker pin & scrub guides */

  /* Gradients & Glows */
  --accent-glow: rgba(0, 245, 255, 0.35);
  --accent-glow-strong: rgba(0, 245, 255, 0.65);
  --accent-violet-glow: rgba(124, 92, 255, 0.4);
  --accent-gradient: linear-gradient(135deg, #00F5FF 0%, #7C5CFF 100%);
  --accent-gradient-glow: linear-gradient(135deg, rgba(0, 245, 255, 0.15) 0%, rgba(124, 92, 255, 0.08) 100%);

  /* Timeline Track Colors */
  --track-lyrics-color: #8B5CF6;    /* Lyrics lane: Cyber Violet */
  --track-video-color: #00F5FF;     /* Video lane: Electric Cyan */
  --track-audio-color: #10B981;     /* Audio lane: Emerald Master */
  --track-sfx-color: #FFB020;       /* SFX lane: Amber Peak */
  --track-fx-color: #00F5FF;        /* FX lane: Electric Cyan */

  /* ─── Specular Borders & Inner Depth ─── */
  --border: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(0, 245, 255, 0.35);
  --border-active: #00F5FF;
  --border-active-glow: rgba(0, 245, 255, 0.45);
  --border-specular: 1px solid var(--border);

  /* ─── Typography Hierarchy ─── */
  --font-display: 'Space Grotesk', 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --text-main: #F4F4F8;             /* Pure crisp heading white (WCAG AAA) */
  --text-secondary: #A0A0B0;        /* Muted cool gray-blue body (min 4.5:1 contrast) */
  --text-dim: #6B6B7F;              /* Micro tags, timecodes, metadata */
  --text-inverse: #0A0A0C;

  /* ─── Radii ─── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ─── Tactile Shadows & Depth ─── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --shadow-glow: 0 0 24px rgba(0, 245, 255, 0.3);
  --shadow-glow-lg: 0 0 48px rgba(0, 245, 255, 0.25);

  /* ─── Precision Hardware Animation Curves ─── */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 180ms;
  --duration-norm: 350ms;
  --duration-slow: 700ms;
}