/* ========================================
   Design Tokens — Sony Movie Mate v2 (Full Browser)
   ======================================== */

:root {
  /* Sony Brand */
  --sony-purple: #6A00B6;
  --core-accent: #B932D8;
  --core-accent-dim: rgba(185, 50, 216, 0.15);
  --core-accent-glow: rgba(185, 50, 216, 0.3);
  --core-indigo: #190047;
  --core-violet: #3F29A3;
  --core-magenta: #CC3ACC;

  /* Surfaces */
  --bg-dark: #0A0A12;
  --bg-phone: #111118;
  --bg-card: #1A1A24;
  --bg-card-hover: #222230;
  --bg-input: #1E1E2A;
  --bg-overlay: rgba(10, 10, 18, 0.92);

  /* Glass Morphism */
  --glass-bg: rgba(17, 17, 24, 0.72);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-blur: blur(24px) saturate(1.4);

  /* Text */
  --text-primary: #FFFFFF;
  --text-secondary: #8A8A9A;
  --text-tertiary: #5A5A6A;

  /* Deep Lore / Sony Exclusive */
  --gold: #D4A843;
  --gold-dim: rgba(212, 168, 67, 0.15);
  --gold-glow: rgba(212, 168, 67, 0.3);

  /* Companion Mode */
  --companion-bg: #1A1824;
  --companion-accent: #9B6DFF;
  --companion-dim: rgba(155, 109, 255, 0.12);

  /* Chat Bubbles */
  --bubble-user: #1A3050;
  --bubble-assistant: #1E1E2A;
  --bubble-companion: #1E1828;
  --bubble-system: rgba(255, 255, 255, 0.05);

  /* Movie Gradients */
  --grad-ghostbusters-1: #1A3A1A;
  --grad-ghostbusters-2: #44AA44;
  --grad-spiderman-1: #8B0000;
  --grad-spiderman-2: #CC2244;
  --grad-closeencounters-1: #0A1628;
  --grad-closeencounters-2: #2E5090;
  --grad-badboys-1: #1A1A40;
  --grad-badboys-2: #FF6600;
  --grad-mib-1: #0A0A0A;
  --grad-mib-2: #333355;

  /* Panel Layout */
  --panel-left-width: 420px;
  --panel-gap: 0px;

  /* Scene Reel */
  --reel-accent: var(--core-accent);
  --reel-card-width: 120px;
  --reel-card-height: 72px;
  --sprocket-size: 6px;

  /* Typography */
  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Timing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition-normal: 300ms var(--ease-out);
  --transition-slow: 500ms var(--ease-out);
}