:root {
  --color-bg: #111317;
  --color-surface-1: #181B20;
  --color-surface-2: #20242B;
  --color-surface-3: #292E37;
  --color-text-primary: #F4F1EC;
  --color-text-secondary: #C3C8D0;
  --color-border: #748095;
  --color-accent: #FF6B4A;
  --color-accent-ink: #16110F;
  --color-near-black: #0D0F12;
  --color-success: #55D68A;
  --color-warning: #F5C451;
  --color-error: #FF7B7B;
  --color-info: #78B7FF;
  --color-focus: #FFD166;
  --scroll-thumb: var(--color-border);
  --scroll-thumb-hover: var(--color-accent);
  --font-display: "Outfit", sans-serif;
  --font-body: "Nunito Sans", sans-serif;
  --text-xs: 0.875rem;
  --text-sm: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  --text-2xl: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem);
  --weight-regular: 400;
  --weight-bold: 700;
  --weight-black: 900;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --radius-small: 2px;
  --radius-control: 6px;
  --container-reading: 72ch;
  --container-editorial: 1200px;
  --container-player: 1280px;
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --player-height: 112px;
  --player-clearance: calc(var(--player-height) + var(--safe-area-bottom) + var(--space-5));
  --shadow-player-edge: 0 -2px 4px 0 rgba(255, 107, 74, 0.34);
  --shadow-player-elevation: 0 -10px 28px 1px rgba(0, 0, 0, 0.58);
  --motion-fast: 160ms;
  --motion-standard: 200ms;
}