/*
 * Design tokens — unique source des valeurs de la landing.
 *
 * Miroir de `dsm/theme` (spec : docs/theming.md) : palette brute d'`AppColors`,
 * puis rôles d'`AppGameColors`, en clair « BD pop » et en sombre « BD de nuit ».
 * Les autres feuilles ne lisent que les rôles, jamais la palette.
 */
:root {
  /* Palette (AppColors) */
  --c-black: #000000;
  --c-cream: #ffe98a;
  --c-cyan: #2ec4ff;
  --c-green: #4bd96b;
  --c-ink: #141414;
  --c-lilac: #b48cff;
  --c-mist: #b9bee6;
  --c-night: #121735;
  --c-night-panel: #1e2552;
  --c-orange: #ff8a3d;
  --c-paper: #ffffff;
  --c-red: #ff3b3b;
  --c-umber: #4a4020;
  --c-yellow: #ffd93b;

  /* Rôles communs aux deux thèmes */
  --action: var(--c-red);
  --alert: var(--c-red);
  --bubble: var(--c-paper);
  --found: var(--c-cyan);
  --gain: var(--c-green);
  --halftone-alert: rgb(255 59 59 / 0.32);
  --hero-text: var(--c-paper);
  --ink: var(--c-ink);
  --on-action: var(--c-ink);
  --points: var(--c-cyan);
  --poison: var(--c-green);
  --team-bees: var(--c-lilac);
  --team-foxes: var(--c-orange);
  --team-sharks: var(--c-cyan);
  --timer-track: var(--c-paper);

  /* Typographie (AppFonts, AppGameTextStyles) */
  --font-display: 'Bangers', Impact, 'Arial Narrow', sans-serif;
  --font-body: 'Nunito', ui-rounded, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, sans-serif;
  --display-spacing: 0.05em;

  /* Traits (AppStrokes) */
  --stroke-panel: 3px;
  --stroke-badge: 2.5px;
  --stroke-text-giant: 4px;
  --stroke-text-hero: 3px;
  --stroke-text-stamp: 2px;
  --stroke-text-small: 1.5px;

  /* Rayons (AppRadii) */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* Ombres dures, sans flou (AppShadows) : décalage vers le bas à droite */
  --offset-small: 3px;
  --offset-row: 4px;
  --offset-button: 5px;
  --offset-giant: 6px;

  /* Inclinaisons (AppTilts) */
  --tilt-burst: -4deg;
  --tilt-hero: -3deg;
  --tilt-banner: -2deg;
  --tilt-stamp: 12deg;
  --tilt-tremble: 4deg;
  --tilt-rays: 18deg;

  /* Mouvement (AppDurations, AppCurves) */
  --duration-fast: 150ms;
  --duration-banner: 200ms;
  --duration-rays-fade: 300ms;
  --duration-burst: 320ms;
  --duration-tremble: 830ms;
  --duration-rays: 1200ms;
  --duration-rays-drift: 16s;
  --duration-reveal: 550ms;
  --ease-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-decelerate: cubic-bezier(0.215, 0.61, 0.355, 1);

  /* Rythme */
  --container: 1120px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --section-y: clamp(3rem, 7vw, 5.5rem);
  --header-h: 68px;
}

@media (max-width: 40rem) {
  :root {
    --header-h: 60px;
  }
}

/* Clair, « BD pop » : fond jaune tramé */
:root {
  color-scheme: light;
  --background: var(--c-yellow);
  --bubble-border: var(--c-ink);
  --bubble-ring: transparent;
  --caption: var(--c-cream);
  --halftone: rgb(20 20 20 / 0.13);
  --hard-shadow: var(--c-ink);
  --locked-border: var(--c-ink);
  --locked-fill: var(--c-cream);
  --panel: var(--c-paper);
  --panel-border: var(--c-ink);
  --rays: rgb(20 20 20 / 0.08);
  --text: var(--c-ink);
  --text-soft: var(--c-umber);
  --timer-digits: var(--c-paper);
  --timer-fill: var(--c-red);
}

/* Sombre, « BD de nuit » : fond bleu nuit tramé de jaune */
.theme-flip {
  color-scheme: dark;
  --background: var(--c-night);
  --bubble-border: var(--c-yellow);
  --bubble-ring: var(--c-ink);
  --caption: var(--c-yellow);
  --halftone: rgb(255 217 59 / 0.1);
  --hard-shadow: var(--c-black);
  --locked-border: rgb(255 217 59 / 0.6);
  --locked-fill: transparent;
  --panel: var(--c-night-panel);
  --panel-border: var(--c-yellow);
  --rays: rgb(255 217 59 / 0.07);
  --text: var(--c-paper);
  --text-soft: var(--c-mist);
  --timer-digits: var(--c-yellow);
  --timer-fill: var(--c-yellow);
}

/* La page suit le thème du système, comme l'app (ThemeMode.system) ;
   `.theme-flip` montre toujours l'autre thème. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: var(--c-night);
    --bubble-border: var(--c-yellow);
    --bubble-ring: var(--c-ink);
    --caption: var(--c-yellow);
    --halftone: rgb(255 217 59 / 0.1);
    --hard-shadow: var(--c-black);
    --locked-border: rgb(255 217 59 / 0.6);
    --locked-fill: transparent;
    --panel: var(--c-night-panel);
    --panel-border: var(--c-yellow);
    --rays: rgb(255 217 59 / 0.07);
    --text: var(--c-paper);
    --text-soft: var(--c-mist);
    --timer-digits: var(--c-yellow);
    --timer-fill: var(--c-yellow);
  }

  .theme-flip {
    color-scheme: light;
    --background: var(--c-yellow);
    --bubble-border: var(--c-ink);
    --bubble-ring: transparent;
    --caption: var(--c-cream);
    --halftone: rgb(20 20 20 / 0.13);
    --hard-shadow: var(--c-ink);
    --locked-border: var(--c-ink);
    --locked-fill: var(--c-cream);
    --panel: var(--c-paper);
    --panel-border: var(--c-ink);
    --rays: rgb(20 20 20 / 0.08);
    --text: var(--c-ink);
    --text-soft: var(--c-umber);
    --timer-digits: var(--c-paper);
    --timer-fill: var(--c-red);
  }
}