/* ===========================================================================
   Radio Continu — designtokens
   Huisstijl: rood #ED1C25, diepblauw #1C509A, wit. Slogan: Altijd Gezellig!
   =========================================================================== */

:root {
  /* -- Merkkleuren -------------------------------------------------------- */
  --rc-red: #ed1c25;
  --rc-red-600: #d0141d;
  --rc-red-700: #a90a1c;
  --rc-red-300: #ff5a61;
  --rc-red-tint: #fff1f1;

  --rc-blue: #1c509a;
  --rc-blue-700: #123566;
  --rc-blue-900: #0a1f3f;
  --rc-blue-500: #2b6ac5;
  --rc-blue-300: #6f9ee0;
  --rc-blue-tint: #eef3fb;

  --rc-gold: #f2a900;
  --rc-gold-tint: #fff6e2;
  --rc-teal: #00a0af;

  /* -- Neutraal ----------------------------------------------------------- */
  --rc-white: #ffffff;
  --rc-ink: #0d1526;
  --rc-ink-70: #46536b;
  --rc-ink-50: #6b7891;
  --rc-ink-30: #9aa4b8;
  --rc-line: #e3e8f0;
  --rc-line-soft: #eef1f6;
  --rc-surface: #ffffff;
  --rc-surface-2: #f6f8fc;
  --rc-surface-3: #eff3f9;

  /* -- Donkere secties ---------------------------------------------------- */
  --rc-night: #081a37;
  --rc-night-2: #0d2550;
  --rc-night-3: #143467;
  --rc-night-line: rgba(255, 255, 255, 0.12);
  --rc-night-text: rgba(255, 255, 255, 0.72);

  /* -- Semantisch --------------------------------------------------------- */
  --rc-success: #17916b;
  --rc-success-tint: #e7f6f0;
  --rc-warning: #b57500;
  --rc-warning-tint: #fff4e0;
  --rc-danger: #c92a2a;
  --rc-danger-tint: #fdecec;
  --rc-info: var(--rc-blue);
  --rc-info-tint: var(--rc-blue-tint);

  /* -- Typografie --------------------------------------------------------- */
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-3xl: clamp(1.9rem, 1.4rem + 2.2vw, 2.75rem);
  --text-4xl: clamp(2.4rem, 1.6rem + 3.6vw, 4rem);
  --text-hero: clamp(2.75rem, 1.6rem + 5.2vw, 5.5rem);

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.14em;

  /* -- Ruimte ------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5.5rem;
  --space-11: 7rem;

  --section-y: clamp(3rem, 2rem + 4vw, 6rem);
  --gutter: clamp(1.15rem, 0.6rem + 2.2vw, 2.5rem);
  --container: 1280px;
  --container-narrow: 860px;

  /* -- Vorm --------------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  /* -- Schaduw ------------------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(13, 21, 38, 0.06);
  --shadow-sm: 0 2px 8px rgba(13, 21, 38, 0.07);
  --shadow: 0 10px 30px -12px rgba(13, 21, 38, 0.22);
  --shadow-lg: 0 24px 60px -24px rgba(10, 31, 63, 0.38);
  --shadow-xl: 0 40px 90px -36px rgba(10, 31, 63, 0.5);
  --shadow-red: 0 14px 34px -14px rgba(237, 28, 37, 0.55);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.65);

  /* -- Beweging ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  /* -- Lagen -------------------------------------------------------------- */
  --z-player: 900;
  --z-header: 800;
  --z-drawer: 950;
  --z-modal: 1000;
  --z-toast: 1100;

  /* -- Verlopen ----------------------------------------------------------- */
  --grad-red: linear-gradient(135deg, #ff3a42 0%, var(--rc-red) 45%, var(--rc-red-700) 100%);
  --grad-blue: linear-gradient(150deg, var(--rc-blue-500) 0%, var(--rc-blue) 40%, var(--rc-blue-900) 100%);
  --grad-night: radial-gradient(120% 140% at 50% -10%, #1d4a92 0%, #0d2550 45%, #061428 100%);
  --grad-gold: linear-gradient(135deg, #ffc94d 0%, var(--rc-gold) 100%);
  --grad-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));

  /* -- Player ------------------------------------------------------------- */
  --player-h: 76px;
}

@media (max-width: 720px) {
  :root {
    --player-h: 68px;
  }
}