/* Sahra TV viewer-web design tokens — a restrained, premium cinematic
   palette. Intentionally distinct from the admin panel's Al-Sala gold
   identity: near-black neutrals do the work, one deep crimson accent is
   reserved for the single most important action per screen — it must
   never dominate the page. */
:root {
  --bg: #0A0A0C;
  --bg-elevated: #131316;
  --surface: #18181C;
  --surface-2: #202024;
  --surface-3: #29292F;
  --surface-hover: #28282D;
  --border: #26262B;
  --border-soft: rgba(255, 255, 255, 0.07);
  --text: #F2F2F4;
  --text-dim: #A3A3AC;
  --text-muted: #6B6B74;

  /* One responsive gutter, referenced by every full-bleed shell (nav, wrap,
     hero, rails) so the left/right edge is guaranteed to line up across
     the whole page at any breakpoint — override the single value per
     breakpoint in site.css, never repeat a literal px per-component. */
  --gutter: 40px;

  /* One accent, used only for the primary action per screen (Watch Now,
     an active filter/tab, a focus ring, the selected quality) — never for
     decoration. Everything else stays white/off-white/charcoal. */
  --accent: #E11D2E;
  --accent-strong: #F5384A;
  --accent-soft: rgba(225, 29, 46, 0.14);
  --accent-ink: #FFFFFF;

  --success: #3DD68C;
  --warning: #E8A33D;
  --danger: #EF5B5B;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-xxxl: 72px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 26px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 0 1px rgba(225, 29, 46, 0.4), 0 8px 22px rgba(225, 29, 46, 0.2);
  --tracking-eyebrow: 0.16em;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-fast: 140ms;
  --motion-standard: 220ms;
  --motion-slow: 380ms;

  --font-ui: 'IBM Plex Sans', -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --font-arabic: 'IBM Plex Sans Arabic', var(--font-ui);
}