/*
 * Design tokens: "Radio Liguria 103".
 * Scène: een Italo-liefhebber die 's avonds laat op de bank of in de auto aan de
 * Rivièra zit, radio aan. Nacht-ultramarijn als drager, chroom als merk, koraal
 * en amber als het licht van de zonsondergang en de verlichte radioschaal.
 */

@font-face {
  font-family: 'Anybody';
  src: url('/fonts/anybody.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Anybody';
  src: url('/fonts/anybody-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/hanken.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/hanken-italic.woff2') format('woff2');
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Nacht: de drager van elke sectie */
  --night-950: oklch(0.13 0.04 278);
  --night-900: oklch(0.17 0.055 278);
  --night-850: oklch(0.2 0.065 279);
  --night-800: oklch(0.24 0.075 280);
  --night-700: oklch(0.31 0.085 282);
  --night-600: oklch(0.4 0.09 284);

  /* Tekst */
  --paper: oklch(0.95 0.014 85);
  --paper-dim: oklch(0.8 0.03 270);
  --paper-faint: oklch(0.64 0.04 275);

  /* Licht van de Rivièra */
  --sunset: oklch(0.72 0.19 40);
  --sunset-deep: oklch(0.62 0.22 22);
  --laser: oklch(0.66 0.24 355);
  --amber: oklch(0.85 0.15 78);
  --amber-glow: oklch(0.85 0.15 78 / 0.45);
  --sky-chrome: oklch(0.84 0.07 232);

  /* Vlakken en lijnen */
  --line: oklch(0.5 0.07 280 / 0.35);
  --line-strong: oklch(0.62 0.07 280 / 0.6);
  --surface: oklch(0.21 0.065 279);
  --surface-raised: oklch(0.26 0.075 281);

  /* Typografie */
  --font-display: 'Anybody', 'Arial Narrow', sans-serif;
  --font-body: 'Hanken Grotesk', 'Segoe UI', sans-serif;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3: clamp(2rem, 1.6rem + 2vw, 3.2rem);
  --step-4: clamp(2.6rem, 1.8rem + 4vw, 5.4rem);
  --step-5: clamp(3.4rem, 2rem + 7vw, 9rem);

  /* Ruimte */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: clamp(2rem, 1.5rem + 2vw, 3rem);
  --space-xl: clamp(3rem, 2rem + 4vw, 5.5rem);
  --space-2xl: clamp(4.5rem, 3rem + 7vw, 9rem);
  /* Zijmarge houdt rekening met de inkeping (notch) van iPhones in landschap */
  --gutter: max(clamp(1rem, 0.5rem + 3vw, 3.5rem), env(safe-area-inset-left), env(safe-area-inset-right));
  --content-max: 82rem;

  /* Vorm */
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 22px;
  --radius-pill: 999px;

  /* Beweging */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 700ms;

  /* Lagen */
  --z-base: 1;
  --z-raised: 10;
  --z-header: 50;
  --z-player: 60;
  --z-overlay: 80;

  --header-height: 4.25rem;
  --tap-min: 44px;
}