/*
 * Design tokens : seule source des valeurs de la landing.
 *
 * Les couleurs du HUD recopient `HUDColor` (EncocheKit/Sources/HUDKit/HUDView.swift) :
 * zones Z1 à Z7, alerte, ok. Les tailles de l'île recopient `IslandLayout`, `HUDType`
 * et `HUDMotion` du même fichier. Une valeur qui change dans l'app change aussi ici.
 * Une seule ambiance, sombre : le produit vit sur une bande noire au-dessus d'une
 * vidéo plein écran, la page le montre dans son élément.
 */
:root {
  color-scheme: dark;

  /* Zones de puissance (HUDColor.zone) */
  --z1: #a8adbd;
  --z2: #5c9eff;
  --z3: #6bdb85;
  --z4: #ffd64d;
  --z5: #ff9438;
  --z6: #ff5454;
  /* Z7 (au-delà de 150 %) existe dans l'app, aucune séance incluse n'y va : pas sur la page. */
  --hud-muted: rgb(255 255 255 / 0.62);

  /* Page */
  --bg: #0b0c10;
  --bg-raised: #121419;
  --panel: #171a21;
  --panel-border: rgb(255 255 255 / 0.08);
  --rule: rgb(255 255 255 / 0.1);
  --text: #f2f3f5;
  --text-soft: #a3a8b3;
  --text-faint: #6f7480;
  --accent: var(--z5);
  --on-accent: #1a0f05;
  --focus: #5c9eff;

  /* Fond des rendus de l'île (le dégradé de `encoche-hud-demo --render`) */
  --scene-b: #2b2742;
  --bezel: #0a0b0e;

  /* Typographie : celle du Mac. Les chiffres du HUD sont en SF Rounded dans l'app
     (`design: .rounded`), `ui-rounded` les restitue sur Apple, le reste suit. */
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Inter,
    Roboto, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue',
    Inter, Roboto, sans-serif;
  --font-hud: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, system-ui,
    sans-serif;

  /* Tailles du HUD (HUDType), en points de l'app */
  --hud-big: 17px;
  --hud-huge: 24px;
  --hud-small: 10.5px;
  --hud-label: 8.5px;

  /* Rayons */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Mouvement (HUDMotion) : un ressort amorti pour la forme, un échange flouté
     pour le contenu, 0,3 s de grâce au survol. */
  --spring: 420ms;
  --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
  --swap-out: 120ms;
  --swap-in: 260ms;
  --swap-delay: 140ms;
  --hover-grace: 300ms;
  /* HUDMotion.tick : une barre qui suit les valeurs glisse un battement entier, sinon elle
     s'arrête à chaque valeur. La séance rejouée bat plus vite que l'app : 700 ms en compact,
     450 ms pendant le compte à rebours de l'annonce. */
  --tick: 700ms;
  --tick-countdown: 450ms;
  --duration-reveal: 550ms;
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);

  /* Rythme */
  --container: 1120px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --section-y: clamp(3.5rem, 8vw, 6.5rem);
  --header-h: 64px;

  /* Île : échelle d'affichage, posée par js/main.js d'après la largeur de l'écran
     simulé ; sans script, ces valeurs. */
  --island-scale: 1.2;
}

@media (max-width: 60rem) {
  :root {
    --island-scale: 0.9;
  }
}

@media (max-width: 40rem) {
  :root {
    --header-h: 56px;
    --island-scale: 0.52;
  }
}