/* ==========================================================================
   Snapzone · Design system web — 2/2 RÔLES SÉMANTIQUES
   --------------------------------------------------------------------------
   Ce que le site consomme : var(--color-action), var(--text-display-md)…
   Chaque rôle dit À QUOI sert une valeur, pas ce qu'elle vaut. Changer une
   primitive dans tokens.css repeint tout le site.

   À charger après tokens.css. CSS pur : aucun outil de build requis.
   Les noms reprennent ceux de l'app (--color-action, --color-instrument…)
   pour que l'app et le site parlent la même langue.
   ========================================================================== */

:root {
  /* ── Fonds ─────────────────────────────────────────────────────────── */
  --color-bg: var(--sz-navy-900); /* fond principal du site */
  --color-bg-raised: var(--sz-navy-800); /* section alternée */
  --color-bg-deep: var(--sz-navy-950); /* footer, bandeaux, zones très profondes */
  --color-instrument-box: var(--sz-navy-700); /* boîtiers : chiffres, chrono, compteurs */
  --color-surface: var(--sz-navy-600); /* cartes, panneaux, champs */
  --color-surface-raised: var(--sz-navy-500); /* surface surélevée, segment vide */
  --color-surface-hover: var(--sz-navy-425);
  --color-overlay-deep: var(--sz-black-88); /* fond d'un menu ou d'une modale */
  --color-scrim: var(--sz-black-72); /* derrière une modale */

  /* ── Texte ─────────────────────────────────────────────────────────── */
  --color-content: var(--sz-white); /* jamais de blanc pur */
  --color-content-muted: var(--sz-w-74); /* texte courant secondaire (AA sur tous les fonds) */
  --color-content-subtle: var(--sz-w-66); /* étiquettes, mentions */
  --color-content-invert: var(--sz-navy-900); /* texte sur jaune ou sur cyan */
  --color-content-disabled: var(--sz-grey-300);

  /* ── Bordures ──────────────────────────────────────────────────────── */
  --color-border: var(--sz-w-12);
  --color-border-strong: var(--sz-w-22);
  --color-border-hover: var(--sz-w-35);

  /* ── Jaune = agir, gagner. Un seul aplat jaune par écran visible. ──── */
  --color-action: var(--sz-yellow-500);
  --color-action-hover: var(--sz-yellow-400);
  --color-action-soft: var(--sz-yellow-300); /* eyebrow posé sur une photo */
  --color-action-tint: var(--sz-yellow-18);
  --color-action-tint-border: var(--sz-yellow-40);
  --color-action-relief: var(--sz-yellow-700);
  --color-on-action: var(--sz-navy-900);

  /* ── Cyan = situer, informer. Jamais l'action principale. ──────────── */
  --color-instrument: var(--sz-cyan-500);
  --color-instrument-text: var(--sz-cyan-300); /* eyebrows, liens, données d'info */
  --color-instrument-tint: var(--sz-cyan-15);
  --color-instrument-border: var(--sz-cyan-35);
  --color-focus: var(--sz-cyan-500);
  --color-selection: var(--sz-cyan-700);
  --color-on-selection: var(--sz-white);

  /* ── États : résultats de jeu, difficultés, validation de formulaire ─ */
  --color-success: var(--sz-green-500);
  --color-success-text: var(--sz-green-300);
  --color-success-fill: var(--sz-green-700); /* aplat sous texte blanc */
  --color-success-tint: var(--sz-green-18);
  --color-warning: var(--sz-orange-500);
  --color-warning-tint: var(--sz-orange-18);
  --color-danger: var(--sz-red-500);
  --color-danger-text: var(--sz-red-300);
  --color-danger-tint: var(--sz-red-18);

  /* ── Tiers ─────────────────────────────────────────────────────────── */
  --color-provider-discord: var(--sz-violet-500);
  --color-provider-discord-hover: var(--sz-violet-400);

  /* ── Dégradés autorisés : voiles photo et halos d'une seule couleur ── */
  --gradient-veil-bottom: linear-gradient(180deg, var(--sz-nuit-10) 0%, var(--sz-nuit-0) 45%, var(--sz-nuit-95) 100%);
  --gradient-veil-side: linear-gradient(90deg, var(--sz-black-88) 0%, var(--sz-carte-35) 100%);
  --gradient-veil-full: linear-gradient(var(--sz-nuit-55), var(--sz-nuit-55));
  --gradient-halo-action: radial-gradient(closest-side, var(--sz-yellow-26), transparent);
  --gradient-halo-instrument: radial-gradient(closest-side, var(--sz-cyan-22), transparent);

  /* ── Typographie ───────────────────────────────────────────────────── */
  --font-ui: var(--sz-font-ui); /* Archivo : la voix */
  --font-mono: var(--sz-font-mono); /* JetBrains Mono : la télémétrie */

  --text-caption: var(--sz-text-caption);
  --text-small: var(--sz-text-small);
  --text-body: var(--sz-text-body);
  --text-lead: var(--sz-text-lead);
  --text-title-sm: var(--sz-text-title-sm);
  --text-title: var(--sz-text-title);
  --text-display-sm: var(--sz-text-display-sm);
  --text-display-md: var(--sz-text-display-md);
  --text-display-lg: var(--sz-text-display-lg);
  --text-data: var(--sz-text-data);
  --text-label: var(--sz-text-label);
  --text-cta: var(--sz-text-cta);
  --text-cta-lg: var(--sz-text-cta-lg);

  --leading-display: var(--sz-leading-display);
  --leading-title: var(--sz-leading-title);
  --leading-body: var(--sz-leading-body);
  --tracking-display: var(--sz-tracking-display);
  --tracking-label: var(--sz-tracking-label);
  --tracking-meta: var(--sz-tracking-meta);
  --tracking-cta: var(--sz-tracking-cta);

  /* ── Espacements (par intention) ───────────────────────────────────── */
  --spacing-tight: var(--sz-space-1); /* icône ↔ libellé */
  --spacing-related: var(--sz-space-2); /* éléments d'un même groupe */
  --spacing-stack: var(--sz-space-3); /* lignes d'une liste */
  --spacing-cluster: var(--sz-space-4); /* groupes voisins, padding de contrôle */
  --spacing-control-x: var(--sz-space-7); /* padding horizontal d'un bouton */
  --spacing-card: var(--sz-space-6); /* padding interne d'une carte */
  --spacing-flow: var(--sz-space-8); /* blocs d'une même section */
  --spacing-block: var(--sz-space-12); /* titre de section ↔ contenu */
  --spacing-wide: var(--sz-space-16); /* grands blocs d'une section */
  --spacing-section: var(--sz-space-section); /* haut et bas d'une section */
  --spacing-gutter: var(--sz-space-gutter); /* marges latérales du site */

  /* ── Formes ────────────────────────────────────────────────────────── */
  --radius-sharp: var(--sz-radius-sharp);
  --radius-base: var(--sz-radius-base);
  --radius-media: var(--sz-radius-media);
  --radius-full: var(--sz-radius-full);

  --skew-action: var(--sz-skew-action);
  --skew-chip: var(--sz-skew-chip);
  --skew-soft: var(--sz-skew-soft);

  /* ── Élévation : relief arcade (ombre pleine), jamais d'ombre floue sur un CTA ── */
  --shadow-relief-lg: var(--sz-relief-lg);
  --shadow-relief-md: var(--sz-relief-md);
  --shadow-relief-sm: var(--sz-relief-sm);
  --shadow-relief-pressed: var(--sz-relief-pressed);
  --shadow-relief-success: var(--sz-relief-success);
  --shadow-relief-danger: var(--sz-relief-danger);
  --shadow-focus: var(--sz-shadow-focus);
  --shadow-glow-action: var(--sz-glow-yellow);
  --shadow-glow-instrument: var(--sz-glow-cyan);
  --shadow-polaroid: var(--sz-shadow-polaroid);
  --shadow-floating: var(--sz-shadow-floating);

  /* ── Mouvement ─────────────────────────────────────────────────────── */
  --duration-micro: var(--sz-dur-micro); /* survol, appui */
  --duration-standard: var(--sz-dur-standard); /* ouverture d'un menu, d'un panneau */
  --duration-feedback: var(--sz-dur-feedback); /* rebond, mise en avant */
  --duration-reveal: var(--sz-dur-reveal); /* apparition au scroll */
  --ease-micro: var(--sz-ease-micro);
  --ease-standard: var(--sz-ease-standard);

  /* ── Empilement ────────────────────────────────────────────────────── */
  --z-raised: var(--sz-z-raised);
  --z-header: var(--sz-z-header);
  --z-dropdown: var(--sz-z-dropdown);
  --z-modal: var(--sz-z-modal);

  /* ── Mise en page ──────────────────────────────────────────────────── */
  --layout-max: var(--sz-layout-max);
  --layout-narrow: var(--sz-layout-narrow);
  --header-height: var(--sz-header-height);
}