:root {
  /* Breakpoints - Mobile First */
  --bp-nokia: 240px;
  --bp-mobile-s: 320px;
  --bp-mobile-m: 375px;
  --bp-mobile-l: 425px;
  --bp-tablet: 768px;
  --bp-laptop: 1024px;
  --bp-desktop: 1440px;
  --bp-wide: 1920px;

  /* Colors - Primary */
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-secondary: #059669;
  --color-accent: #f59e0b;

  /* Colors - Text */
  --color-text-primary: #111827;
  --color-text-secondary: #4b5563;
  --color-text-muted: #6b7280;

  /* Colors - Background */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f9fafb;
  --color-bg-highlight: #fef3c7;

  /* Colors - UI */
  --color-border: #e5e7eb;
  --color-border-focus: #3b82f6;

  /* Theme colors (ex-apple) */
  --theme-bg: #ffffff;
  --theme-surface: #f5f5f7;
  --theme-text-head: #4b5563;
  --theme-text-body: #86868b;
  --theme-accent: #0071e3;
  --theme-accent-hover: #0077ed;

  /* Spacing - Responsive */
  --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
  --space-sm: clamp(0.5rem, 1vw, 0.75rem);
  --space-md: clamp(1rem, 2vw, 1.5rem);
  --space-lg: clamp(1.5rem, 3vw, 2rem);
  --space-xl: clamp(2rem, 4vw, 3rem);
  --space-2xl: clamp(3rem, 6vw, 4rem);
  --space-3xl: clamp(4rem, 8vw, 6rem);

  /* Container */
  --container-max: min(1200px, calc(100vw - 2rem));
  --container-narrow: min(800px, calc(100vw - 2rem));

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* Touch targets */
  --touch-min: 44px;
  --touch-optimal: 48px;

  /* Typography */
  --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'Orbitron', sans-serif;

  /* Z-index scale */
  --z-audio-player: 100;
  --z-modal-messages: 200;
  --z-modal-animation: 300;
}

@media (min-width: 768px) {
  :root {
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
  }
}