/**
 * The Podcast App - Marketing tokens
 * Shared across the static marketing site.
 */

:root {
  color-scheme: dark;

  /* Brand and surface palette */
  --bg: #07111F;
  --bg-elevated: #0D1A30;
  --surface: #101E35;
  --surface-2: #162742;
  --surface-3: rgba(255, 255, 255, 0.06);
  --panel: rgba(17, 31, 53, 0.88);
  --panel-strong: rgba(19, 37, 63, 0.94);
  --paper: #F7F3EA;
  --paper-strong: #FFFDF9;
  --paper-soft: #EEE7DA;

  /* Text */
  --text: #F5F8FF;
  --text-soft: #C4D0E5;
  --text-muted: #96A7C4;
  --text-body: #0F1B2E;
  --text-body-muted: #5B6B83;

  /* Brand signals */
  --primary: #6AA6FF;
  --primary-dark: #4B87E2;
  --primary-ink: #07111F;
  --accent: #FF9C43;
  --accent-strong: #FF7A00;
  --accent-cool: #67E6FF;
  --success: #9DE7B3;

  /* Lines and shadows */
  --border: rgba(151, 176, 214, 0.18);
  --border-strong: rgba(255, 255, 255, 0.14);
  --shadow-sm: 0 12px 30px rgba(4, 12, 24, 0.22);
  --shadow-md: 0 22px 60px rgba(4, 12, 24, 0.34);
  --shadow-lg: 0 32px 90px rgba(4, 12, 24, 0.42);

  /* Radii */
  --r-xs: 10px;
  --r-sm: 16px;
  --r-md: 24px;
  --r-lg: 32px;
  --r-xl: 44px;
  --r-full: 999px;

  /* Typography */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Layout */
  --max-width: 1180px;
  --content-width: 760px;
  --header-height: 76px;

  /* Spacing */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 18px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  /* Motion */
  --transition-fast: 0.18s ease;
  --transition-base: 0.28s ease;
  --transition-slow: 0.42s ease;

  /* Legacy aliases for simple pages still using old names */
  --muted: var(--text-muted);
  --surface2: var(--surface-2);
  --font: var(--font-body);
  --z-header: 100;
  --z-modal: 300;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0s;
    --transition-base: 0s;
    --transition-slow: 0s;
  }
}