/**
 * The Podcast App - Design System Tokens
 * Version: 1.0.0
 */

:root {
  /* ========== Core Colors ========== */
  --bg: #FFFFFF;
  --surface: #F6F7FB;
  --surface2: #FFFFFF;
  --text: #0B1220;
  --muted: #5C677A;
  --border: #E7EAF0;

  /* ========== Brand Colors ========== */
  --primary: #3D7BFF;
  --primary-dark: #2A5FD9;
  --primary-ink: #FFFFFF;
  --accent: #E37C3A;

  /* ========== Shadows ========== */
  --shadow-sm: 0 4px 20px rgba(11, 18, 32, 0.06);
  --shadow-md: 0 10px 35px rgba(11, 18, 32, 0.10);
  --shadow-lg: 0 16px 48px rgba(11, 18, 32, 0.12);

  /* ========== Border Radii ========== */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-full: 9999px;

  /* ========== Typography ========== */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ========== Spacing Scale ========== */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* ========== Layout ========== */
  --max-width: 1120px;
  --header-height: 64px;

  /* ========== Section Spacing (tighter for conversions) ========== */
  --section-py-desktop: 96px;
  --section-py-tablet: 72px;
  --section-py-mobile: 56px;
  --hero-py-desktop: 120px;
  --hero-py-tablet: 96px;
  --hero-py-mobile: 72px;

  /* ========== Transitions ========== */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* ========== Z-Index Scale ========== */
  --z-header: 100;
  --z-sticky: 200;
  --z-modal: 300;
}

/* Dark mode support (future) */
@media (prefers-color-scheme: dark) {
  :root {
    /* Override tokens for dark mode when implemented */
  }
}