/* ==========================================================================
   Objectif Fauteuil — Design Tokens (Stage 1 foundation)
   ==========================================================================
   CONTRACT — read before editing:
   - WCAG AA is a HARD RULE. Every text-on-surface pair must reach 4.5:1
     (body text) / 3:1 (large text and UI borders/interactive boundaries).
   - No raw hex, no raw rgba(), no magic numbers anywhere OUTSIDE this file.
     Every other stylesheet consumes these custom properties only.
   - This file loads BEFORE style.css, which no longer declares its own
     :root — these are the live values app-wide (--radius-btn really is
     12px, not 10px). Never redeclare a token in style.css: same-name
     later in the cascade shadows this file silently, which is exactly
     what neutralised --radius-btn before the migration.
   - Migration complete: player-facing (Pass 1) and backstage (Pass 2).
     Note .sel-* is NOT backstage despite the naming — it is the player
     theme picker rendered by ui.js.
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------
     Color — brand
     ------------------------------------------------------------------ */
  --gold: #f3cf8e;                              /* single functional accent: focus, active, highlights */
  --gold-glow: rgba(243, 207, 142, 0.25);

  /* Title/logo treatment ONLY. Do not use for buttons, borders, or text. */
  --brand-mark: linear-gradient(to right, #F5DEB3, #FFC0CB, #FF69B4);
  /* Alias — style.css and .gradient-text still reference this name directly.
     Kept as a pointer to --brand-mark so the title gradient never breaks. */
  --accent-gradient: var(--brand-mark);
  /* Variante rouge du brand mark, portee par le titre d'accueil (.home-title).
     Memes contraintes que --brand-mark : titre/logo uniquement, jamais une
     couleur d'UI. Les trois teintes sont des tokens rouges deja presents :
     aucun hex nouveau n'entre ici. Contraste sur --bg-deep : 7.2:1 pour
     --wrong-soft, 4.4:1 pour --red-pure (large text, seuil 3:1). */
  --brand-mark-red: linear-gradient(to right, var(--wrong-soft), var(--red-pure) 50%, var(--wrong-soft));

  /* Simulation HUD ONLY + admin surfaces
     (.admin-*, .adp-*, .cat-*, .subm-*, .btn-simulation, .sim-*, .hud-*).
     Not part of the player-facing palette — never use on game screens.
     Pass 2 re-hue: the previous values (#6e8efb / #a777e3) were byte-
     identical to --mode-duo / --mode-carre, which are player-visible
     (profile stat bars) — one swatch, two meanings, the exact defect this
     project already removed once for the AI-question badge. Backstage took
     a cool slate-blue; the mode colors have since moved to the gold/red
     family (see below), so the two families no longer share a hue at all.
     Contrast
     verified: --backstage vs --bg-deep 4.16:1, vs --surface-solid-1
     3.55:1 (>=3:1 UI-boundary target); white text on --backstage 4.9:1,
     white text on --backstage-2 6.39:1 (>=4.5:1 body-text target). */
  --backstage: #597391;
  --backstage-2: #4a617b;
  /* Alpha variants of --backstage (rgb 89,115,145), replacing the old
     rgba(110,142,251, N) literals scattered across the simulation HUD.
     Named by usage, mirroring --gold-glow's single-purpose pattern. */
  --backstage-glow: rgba(89, 115, 145, 0.3);          /* box-shadow, default */
  --backstage-glow-strong: rgba(89, 115, 145, 0.5);   /* box-shadow, hover */
  --backstage-wash: rgba(89, 115, 145, 0.05);         /* HUD panel background */
  --backstage-wash-faint: rgba(89, 115, 145, 0.02);   /* HUD inset shadow */
  --backstage-border: rgba(89, 115, 145, 0.2);        /* HUD panel border */
  --backstage-tint: rgba(89, 115, 145, 0.1);          /* control hover fill */

  /* ------------------------------------------------------------------
     Color — base / text
     ------------------------------------------------------------------ */
  --bg-deep: #050505;
  --text-main: #ffffff;
  --text-muted: #b0b0b0;
  /* --text-subtle intentionally omitted: no candidate value in the
     current codebase could be verified at >= 4.5:1 on --bg-deep without
     guessing. Add it only once a real value is picked and checked. */

  /* ------------------------------------------------------------------
     Color — semantic
     ------------------------------------------------------------------ */
  --correct-color: #4caf50;
  --wrong-color: #ef5350;
  /* Couleurs des barres « par mode » du profil — player-visible, et nulle
     part ailleurs (aucun chemin de jeu ne les lit : vérifié par grep).
     Elles portaient un bleu, un violet et un orange (#6e8efb / #a777e3 /
     #ff8c42) hérités d'aucune identité : quatre teintes néon dans une
     interface noir/rouge/or. Elles sont désormais des ALIAS assumés de la
     famille or, en rampe du plus clair au plus profond, plus le rouge pour
     le seul mode qui fait PERDRE des points. Alias volontaires (idiome déjà
     utilisé pour --accent-gradient) : le nom garde le sens « mode », la
     valeur reste unique et modifiable en un seul endroit. Une référence
     var() se résout à l'usage, pas à la déclaration — pointer plus bas dans
     ce même :root est valide.
     NB : la collision d'avant avec --backstage (#6e8efb / #a777e3) n'existe
     plus par construction, les deux familles n'ont plus une teinte commune. */
  --mode-duo: var(--gold);            /* #f3cf8e — le plus clair */
  --mode-carre: var(--gold-warm);     /* #eeb457 */
  --mode-cash: var(--gold-tint);      /* #d4af37 — le plus profond */
  --mode-supercash: var(--wrong-soft);/* #ff6464 — seul mode à points négatifs */

  /* Solid dark red for the destructive confirm-dialog button (.btn-danger,
     ui.js showConfirm). Map flagged this as distinct from --wrong-color —
     "candidate for a future --danger-dark" — added rather than left raw. */
  --danger-dark: #a93226;
  --danger-dark-hover: #c0392b;

  /* Solid near-black surfaces (dropdown panels, thumbnail borders, page
     background gradient stops). The surface-1/2/3 ladder above is alpha-
     over-body, not usable where a flat opaque fill is required. Map
     flagged this whole family as a gap ("needs --surface-solid-*"); the
     four distinct values already in use are named individually rather
     than collapsed, since collapsing them would visibly change the body
     background's radial-gradient falloff. */
  --surface-solid-1: #1a1a1a;
  --surface-solid-2: #151515;
  --surface-solid-3: #1b1b1b;
  --surface-solid-4: #202022;
  --surface-solid-5: #080808;
  --surface-solid-6: #000000;

  /* Legacy goldenrod tint (#D4AF37) — distinct from --gold (paler, #f3cf8e).
     Pre-existing second gold used app-wide as a background/border tint
     underneath var(--gold) text (badges, daily card, footer, auth). The
     Stage 1 map did not cover this family; added here rather than left as
     scattered raw rgba() so item-4/5 migrations have a token to point to.
     Use with color-mix(in srgb, var(--gold-tint) N%, transparent) for alpha. */
  --gold-tint: #d4af37;

  /* ------------------------------------------------------------------
     Couleurs de base des variantes alpha
     ------------------------------------------------------------------
     style.css portait 116 rgba() bruts, presque tous des variantes d'opacité
     d'une poignée de teintes. Ils sont désormais écrits
     `color-mix(in srgb, var(--x) N%, transparent)` — l'idiome déjà utilisé
     dans ce projet pour --gold-tint. Valeurs conservées à l'identique : la
     migration ne change aucun pixel, elle donne juste un nom à la teinte.
     ------------------------------------------------------------------ */
  /* Dégradés des barres du HUD Simulation (Ctrl+Shift+D, backstage only).
     Ces 6 teintes étaient des hex bruts dans simulation.js ; valeurs conservées.
     Distinctes de --mode-duo / --mode-carre, qui sont player-visible. */
  --sim-duo-1:    #81c784;
  --sim-carre-1:  #ffb74d;
  --sim-carre-2:  #ffa726;
  --sim-cash-1:   #ff8a65;
  --sim-cash-2:   #ff7043;
  --sim-super-1:  #e57373;

  --shadow-base:  #000000;  /* ombres et voiles */
  --on-gold:      #16120a;  /* texte posé sur un aplat --gold */

  /* Rouges : --wrong-color (#ef5350) est le rouge d'état ; ceux-ci sont des
     teintes distinctes déjà présentes, pas des alias. */
  --wrong-soft:   #ff6464;
  --wrong-pale:   #ff9696;
  --wrong-pale-2: #ff8c8c;
  --wrong-pale-3: #ff7d7d;
  --danger-alt:   #e74c3c;
  /* Pastille de notification (.notif-badge) : le chiffre blanc y tient 5:1.
     Sur --wrong-color, il ne tenait que 3,5:1. */
  --notif-fill:   #d32f2f;
  --red-pure:     #e60000;

  --gold-pure:    #ffd700;  /* distinct de --gold (#f3cf8e) et --gold-tint (#d4af37) */
  --gold-warm:    #eeb457;
  --warn-soft:    #ffc864;
  --success-alt:  #2ecc71;  /* distinct de --correct-color (#4caf50) */
  --discord:      #5865f2;  /* blurple officiel ; #7289da était la version d'avant 2021 */

  /* Fonds sombres proches de --bg-deep, conservés séparément (dégradés). */
  --ink-18:       #121214;
  --ink-14b:      #0e0e10;
  --ink-14:       #0e0e0e;
  --ink-10:       #0a0a0a;

  /* ------------------------------------------------------------------
     Surfaces (glass ladder)
     ------------------------------------------------------------------ */
  --surface-1: rgba(255, 255, 255, 0.03);
  --surface-2: rgba(255, 255, 255, 0.05);
  --surface-3: rgba(255, 255, 255, 0.08);

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.20);
  /* Contraste de bordure WCAG 1.4.11 (~3.1:1 sur --bg-deep) : minimum pour la
     limite visible d'un composant d'interface (inputs, boutons de réponse). */
  --border-contrast: rgba(255, 255, 255, 0.40);

  --blur-sm: 10px;
  --blur-md: 20px;
  --blur-lg: 30px;

  /* Legacy surface variables — style.css still references these directly.
     Kept verbatim (same values) so nothing breaks; do not repurpose. */
  --bg-card: rgba(20, 20, 20, 0.65);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);

  /* ------------------------------------------------------------------
     Empilement (z-index)
     ------------------------------------------------------------------
     14 valeurs ad hoc coexistaient (0,1,2,5,10,200,900,999,1000,1001,1002,
     3000,9999,10000) sans échelle. Ce n'est pas théorique : le commit 1cac96b
     a dû réparer .modal--z1001/z1002 (components.css) écrasé par
     .settings-modal{z-index:1000} (style.css, même spécificité, chargé après).
     Les paliers sont espacés de 100 pour laisser de la place entre deux
     couches sans réécrire la suivante.

     Ordre : contenu < barre admin < entête collant < surcouches < modales
             < confirmation < lightbox < lien d'évitement.        */
  --z-under:      -1;     /* pseudo-element sous le contenu de son parent (avec isolation: isolate) */
  --z-base:        1;     /* pile locale d'un composant (.option-btn) */
  --z-raised:      10;    /* badge, footer, barre de progression */
  --z-admin-bar:   200;
  --z-sticky:      900;
  --z-overlay:     999;   /* voile derrière les modales */
  --z-modal:       1000;
  --z-modal-2:     1001;  /* modale ouverte PAR-DESSUS une modale */
  --z-modal-3:     1002;
  --z-popover:     1000;  /* panneau ancré (réglages) — même plan qu'une modale */
  --z-confirm:     3000;  /* confirmation : toujours au-dessus de son appelant */
  --z-toast:       4000;  /* notification passagère : au-dessus d'une modale et de sa confirmation */
  --z-lightbox:    9999;
  --z-skip-link:   10001; /* accessibilité : jamais masqué par quoi que ce soit */

  /* ------------------------------------------------------------------
     Radius
     ------------------------------------------------------------------ */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;

  /* Alias kept because style.css and inline markup reference this name.
     Resolves to 12px. The old 10px value was an unenforced rule (12px was
     already the most common radius in the codebase); the bump is
     deliberate and recorded in docs/adr/0001-design-token-system.md. */
  --radius-btn: var(--radius-md);

  /* ------------------------------------------------------------------
     Spacing (4px base unit, rem)
     ------------------------------------------------------------------ */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */

  /* ------------------------------------------------------------------
     Typography
     ------------------------------------------------------------------ */
  --font-ui: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'Consolas', 'Monaco', monospace;

  /* Palier manquant sous --text-xs. 18 déclarations vivaient entre 0.52 et
     0.62rem (badges, compteurs, méta-infos) sans token à viser : les forcer sur
     --text-xs (0.72) les aurait toutes grossies visiblement. Le pas est réel,
     comme --text-display l'était au-dessus. */
  --text-2xs: 0.62rem;
  --text-xs: 0.72rem;
  --text-sm: 0.82rem;
  --text-md: 0.9rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.6rem;
  --text-2xl: 2.2rem;
  /* Hero/transition-screen title only (e.g. "MANCHE 1" full-bleed titles).
     The map flagged 3rem as a genuine gap (delta 0.8rem past --text-2xl) —
     forcing it onto --text-2xl would visibly shrink the thin-uppercase
     hero heading treatment the design must preserve. Added as its own step
     rather than silently snapped. */
  --text-display: 3rem;

  --weight-display: 300;
  --weight-body: 400;
  --weight-medium: 600;
  --weight-bold: 800;
  --weight-impact: 900;

  --tracking-display: 0.2em; /* replaces the fixed letter-spacing: 4px on headings */

  /* Tracking des controles (boutons, chips, affordances). En em : un
     tracking en px fige l'ecart quelle que soit la taille de police, c'est
     ce qui rendait 3px sur le hero (16px) et 1.5px sur un bouton (14.4px)
     visuellement sans rapport. */
  --tracking-ui: 0.08em;    /* boutons md — remplace 1px / 1.5px */
  --tracking-cta: 0.18em;   /* boutons lg (hero, suivant) — remplace 3px */
  --tracking-chip: 0.04em;  /* chips et affordances — remplace 0.5px */

  /* ------------------------------------------------------------------
     Controles (hauteur des boutons)
     ------------------------------------------------------------------
     Deux tailles de bouton texte, une taille d'icone + une variante
     inline. 44px = cible tactile WCAG 2.5.8 AAA ; c'est deja la valeur
     sur laquelle .settings-btn et .footer-key-btn avaient converge.
     Toujours applique en min-height : un libelle qui passe sur deux
     lignes doit grandir au-dessus du plancher, jamais passer dessous. */
  --control-h-sm: 38px;        /* actions compactes de la barre admin (.adp-global-actions .btn) */
  --control-h-md: 44px;        /* defaut : tous les .btn */
  --control-h-lg: 52px;        /* CTA hero + bouton Suivant */
  --control-icon: 44px;        /* bouton icone autonome */
  --control-icon-inline: 32px; /* bouton icone dans une ligne de texte */

  /* ------------------------------------------------------------------
     Motion
     ------------------------------------------------------------------ */
  --dur-fast: 0.15s;
  --dur-base: 0.3s;
  --dur-slow: 0.5s;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}