/* ==========================================================================
   Snapzone · Design system web — 1/2 PRIMITIVES (valeurs brutes)
   --------------------------------------------------------------------------
   Seul fichier du site où une valeur brute (couleur, taille, durée) a le
   droit d'exister. Le reste du site consomme les RÔLES de semantic.css,
   jamais ces --sz-* directement.

   Source : prototype de l'app Snapzone, src/styles/tokens.css (octobre 2026),
   filtré et adapté au site vitrine :
   - repris tels quels : palette, angles d'action, reliefs, polices, durées ;
   - écartés (propres à l'app) : échelle typographique compacte 8–44 px,
     rythme d'espacement compact, géométrie du shell (topbar, rail, bottom
     nav), bouton SNAP!, durées des verdicts, échelle z-index du HUD de jeu ;
   - ajoutés (propres au web) : échelle display fluide, échelle de lecture,
     espacements de sections, rayon « média », largeurs de mise en page,
     échelle z-index d'un site (header, menus, modale).
   Si une couleur diffère de l'app, c'est l'app qui fait foi.
   ========================================================================== */

:root {
  /* — Navy : les fonds, du plus profond au plus clair — */
  --sz-navy-950: #07131f; /* Abysse  : footer, bandeaux */
  --sz-navy-900: #0b1c2c; /* Nuit    : fond principal */
  --sz-navy-800: #0f2438; /* Nuit 2  : sections alternées */
  --sz-navy-700: #173753; /* Carte   : boîtiers d'instrument */
  --sz-navy-600: #22405b; /* Surface : cartes, panneaux */
  --sz-navy-500: #375a78; /* Relief  : surfaces surélevées, segments vides */
  --sz-navy-425: #28496a; /* survol d'une surface */

  /* — Jaune : l'action — */
  --sz-yellow-300: #ffe07a; /* Jaune Doux : eyebrow sur photo */
  --sz-yellow-400: #ffd23f; /* Jaune Survol */
  --sz-yellow-500: #ffc300; /* Jaune Action */
  --sz-yellow-700: #ac8400; /* Jaune Relief : ombre pleine sous le CTA */

  /* — Cyan : l'instrument, l'information — */
  --sz-cyan-300: #7ad2f3; /* Cyan Texte */
  --sz-cyan-500: #00a8e8; /* Cyan Instrument */
  --sz-cyan-700: #0178a6; /* Cyan Profond : aplat sous texte blanc */

  /* — États de jeu : résultats et difficultés uniquement — */
  --sz-green-300: #75cf80;
  --sz-green-500: #2db53d;
  --sz-green-700: #1d7a2a;
  --sz-orange-500: #f68704;
  --sz-red-300: #ff9b9b;
  --sz-red-500: #f14042;

  /* — Texte — */
  --sz-white: #f0eff4; /* Blanc Snap : remplace toujours le blanc pur */
  --sz-grey-300: #a9acb0; /* Gris Inactif */
  --sz-black: #02070c;

  /* — Tiers : couleur de marque d'un service externe (bouton Discord) — */
  --sz-violet-500: #5b62ee;
  --sz-violet-400: #7278f4;

  /* — Transparences — */
  --sz-w-12: rgb(240 239 244 / 0.12);
  --sz-w-22: rgb(240 239 244 / 0.22);
  --sz-w-35: rgb(240 239 244 / 0.35);
  --sz-w-66: rgb(240 239 244 / 0.66);
  --sz-w-74: rgb(240 239 244 / 0.74);
  --sz-black-45: rgb(2 7 12 / 0.45);
  --sz-black-72: rgb(2 7 12 / 0.72);
  --sz-black-88: rgb(2 7 12 / 0.88);
  --sz-nuit-0: rgb(11 28 44 / 0);
  --sz-nuit-10: rgb(11 28 44 / 0.1);
  --sz-nuit-55: rgb(11 28 44 / 0.55);
  --sz-nuit-88: rgb(11 28 44 / 0.88);
  --sz-nuit-95: rgb(11 28 44 / 0.95);
  --sz-carte-35: rgb(23 55 83 / 0.35);
  --sz-cyan-15: rgb(0 168 232 / 0.15);
  --sz-cyan-22: rgb(0 168 232 / 0.22);
  --sz-cyan-35: rgb(0 168 232 / 0.35);
  --sz-cyan-40: rgb(0 168 232 / 0.4);
  --sz-yellow-18: rgb(255 195 0 / 0.18);
  --sz-yellow-26: rgb(255 195 0 / 0.26);
  --sz-yellow-40: rgb(255 195 0 / 0.4);
  --sz-green-18: rgb(45 181 61 / 0.18);
  --sz-orange-18: rgb(246 135 4 / 0.18);
  --sz-red-18: rgb(241 64 66 / 0.18);

  /* — Polices (Google Fonts, licence OFL) — */
  --sz-font-ui: "Archivo", system-ui, sans-serif;
  --sz-font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* — Tailles de texte web (base 16 px). Display fluide, lecture fixe. — */
  --sz-text-caption: 0.8125rem; /* 13 px */
  --sz-text-small: 0.875rem; /* 14 px */
  --sz-text-body: 1.0625rem; /* 17 px */
  --sz-text-lead: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem); /* 18 → 22 px */
  --sz-text-title-sm: 1.25rem; /* 20 px */
  --sz-text-title: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem); /* 22 → 28 px */
  --sz-text-display-sm: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); /* 28 → 40 px */
  --sz-text-display-md: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem); /* 36 → 60 px */
  --sz-text-display-lg: clamp(2.75rem, 1.4rem + 5.6vw, 5.75rem); /* 44 → 92 px */
  --sz-text-data: clamp(2rem, 1.45rem + 2.3vw, 3.5rem); /* 32 → 56 px, chiffres mono */
  --sz-text-label: 0.8125rem; /* 13 px, eyebrows et méta mono */
  --sz-text-cta: 1rem; /* 16 px */
  --sz-text-cta-lg: 1.1875rem; /* 19 px */

  --sz-leading-display: 0.95;
  --sz-leading-title: 1.1;
  --sz-leading-body: 1.6;
  --sz-tracking-display: -0.01em;
  --sz-tracking-label: 0.16em;
  --sz-tracking-meta: 0.06em;
  --sz-tracking-cta: 0.04em;

  /* — Espacements : grille de 4 px, étendue aux grandes respirations du web — */
  --sz-space-1: 4px;
  --sz-space-2: 8px;
  --sz-space-3: 12px;
  --sz-space-4: 16px;
  --sz-space-5: 20px;
  --sz-space-6: 24px;
  --sz-space-7: 28px;
  --sz-space-8: 32px;
  --sz-space-12: 48px;
  --sz-space-16: 64px;
  --sz-space-24: 96px;
  --sz-space-section: clamp(64px, 40px + 6vw, 128px);
  --sz-space-gutter: clamp(16px, 8px + 3vw, 40px);

  /* — Rayons : discrets. Pas de pilule. — */
  --sz-radius-sharp: 4px; /* plaques : boutons, badges, puces */
  --sz-radius-base: 8px; /* cartes, champs, boîtiers */
  --sz-radius-media: 16px; /* web : grandes photos et visuels de section */
  --sz-radius-full: 9999px; /* cercle : avatars, points de statut, SNAP! */

  /* — Angles d'action — */
  --sz-skew-action: -8deg; /* CTA, badges */
  --sz-skew-chip: -6deg;
  --sz-skew-soft: -4deg; /* cartes de choix */

  /* — Reliefs (ombre pleine, 0 flou) et lumières — */
  --sz-relief-lg: 0 6px 0 var(--sz-yellow-700);
  --sz-relief-md: 0 4px 0 var(--sz-yellow-700);
  --sz-relief-sm: 0 3px 0 var(--sz-yellow-700);
  --sz-relief-pressed: 0 1px 0 var(--sz-yellow-700);
  --sz-relief-success: 0 3px 0 var(--sz-green-500);
  --sz-relief-danger: 0 3px 0 var(--sz-red-500);
  --sz-shadow-focus: 0 0 0 3px var(--sz-cyan-40);
  --sz-glow-yellow: 0 0 28px var(--sz-yellow-26);
  --sz-glow-cyan: 0 0 28px var(--sz-cyan-22);
  --sz-shadow-polaroid: 0 24px 60px var(--sz-black-72); /* photo cible uniquement */
  --sz-shadow-floating: 0 18px 48px var(--sz-black-45); /* menus déroulants, panneaux flottants */

  /* — Mouvement — */
  --sz-dur-micro: 150ms;
  --sz-dur-standard: 300ms;
  --sz-dur-feedback: 500ms;
  --sz-dur-reveal: 600ms; /* web : apparition au scroll, une seule fois */
  --sz-ease-micro: ease;
  --sz-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* — Empilement d'un site (pas celui du HUD de jeu) — */
  --sz-z-raised: 1;
  --sz-z-header: 50;
  --sz-z-dropdown: 60;
  --sz-z-modal: 80;

  /* — Mise en page — */
  --sz-layout-max: 1200px;
  --sz-layout-narrow: 760px;
  --sz-header-height: 72px;
}