/**
 * Sopplayer v2.0 - Design Tokens (CSS Custom Properties)
 * Modern, accessible, dark-first aesthetic inspired by Linear and modern dev tools
 */

:root {
  /* Color Palette - Default Dark / Glass */
  --sp-color-bg: rgba(15, 23, 42, 0.85);
  --sp-color-surface: rgba(30, 41, 59, 0.7);
  --sp-color-surface-hover: rgba(51, 65, 85, 0.85);
  --sp-color-border: rgba(255, 255, 255, 0.12);
  --sp-color-text: #f8fafc;
  --sp-color-text-muted: #94a3b8;
  --sp-color-primary: #38bdf8;
  --sp-color-primary-hover: #0ea5e9;
  --sp-color-primary-glow: rgba(56, 189, 248, 0.35);
  --sp-color-buffer: rgba(255, 255, 255, 0.25);
  --sp-color-track: rgba(255, 255, 255, 0.15);
  --sp-color-danger: #f43f5e;

  /* Glassmorphism & Shadows */
  --sp-glass-backdrop: blur(12px) saturate(160%);
  --sp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --sp-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --sp-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);

  /* Radius Tokens */
  --sp-radius-xs: 4px;
  --sp-radius-sm: 6px;
  --sp-radius-md: 10px;
  --sp-radius-lg: 16px;
  --sp-radius-full: 9999px;

  /* Spacing Tokens */
  --sp-space-1: 4px;
  --sp-space-2: 8px;
  --sp-space-3: 12px;
  --sp-space-4: 16px;
  --sp-space-5: 20px;
  --sp-space-6: 24px;

  /* Typography */
  --sp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sp-font-size-xs: 11px;
  --sp-font-size-sm: 13px;
  --sp-font-size-md: 14px;
  --sp-font-size-lg: 16px;

  /* Control Sizing */
  --sp-btn-size: 36px;
  --sp-btn-padding: 8px;
  --sp-progress-height: 4px;
  --sp-progress-height-hover: 7px;
  --sp-thumb-size: 13px;

  /* Focus & Accessibility */
  --sp-focus-ring: 2px solid var(--sp-color-primary);
  --sp-focus-offset: 2px;

  /* Transitions */
  --sp-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --sp-transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --sp-transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-Index Hierarchy */
  --sp-z-video: 1;
  --sp-z-poster: 2;
  --sp-z-spinner: 5;
  --sp-z-bigplay: 6;
  --sp-z-controls: 10;
  --sp-z-menu: 20;
  --sp-z-modal: 30;
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --sp-transition-fast: 0s;
    --sp-transition-normal: 0s;
    --sp-transition-slow: 0s;
  }
}