/* ============================================================================
   base.css — fondations partagées par toutes les pages (hors game.html)
   Reset, design tokens, typographie de base, sélecteur de langue.
   À lier en PREMIER, avant tout fichier de famille (hub/leaderboard/site).
   ========================================================================= */

/* Tokens canoniques du design system (SOURCE UNIQUE = packages/ui/src/styles/theme.css,
   exporté par `pnpm --filter @ultraderby/protocol gen:tokens`). Importés en TÊTE pour une
   adoption progressive : la coquille web partage ainsi le même vocabulaire que les composants
   React @ultraderby/ui et les prototypes /design-sync (--background, --brand, --success…).
   Les tokens web historiques ci-dessous (--bg/--accent/--card…) sont déclarés APRÈS et restent
   donc prioritaires : aucun changement de rendu, seulement des noms canoniques en plus. */
@import "tokens.generated.css";
/* Classes .inst-* (grammaire atlas : paliers, filets, statuts par liseré, glow) — opt-in
   par usage : aucune page existante ne change tant qu'elle ne pose pas la classe. */
@import "instrument.generated.css";

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

/* Design tokens — jeu unifié (superset de toutes les variantes :root).
   Palette dérivée du LOGO Ultra Derby (public/ultra-derby-logo.png) :
   cheval BLEU électrique (gauche) vs cheval ROUGE cramoisi (droite), séparés
   par l'éclair blanc, sur fond noir froid. Le dégradé --accent → --accent2
   rejoue donc le « derby » bleu→rouge de gauche à droite de la marque.
   --accent / --accent2 sont l'UNIQUE source de vérité : tout halo, focus,
   badge ou bordure d'accent passe par --accent-rgb / --accent-soft. */
:root{
  --bg:#0a0a12;
  --card:#13131e;
  --bd:rgba(255,255,255,.08);
  --accent:#009ACF;          /* bleu électrique du logo, juste assez foncé pour que le texte BLANC reste lisible sur les boutons en dégradé */
  --accent2:#F4234F;         /* rouge cramoisi — cheval droit du logo */
  --accent-rgb:0,154,207;    /* = --accent, pour les rgba() (halos/focus/badges) */
  --accent2-rgb:244,35,79;   /* = --accent2 */
  --accent-soft:#5CC8FF;     /* bleu clair lisible — textes & badges d'accent sur fond sombre */
  /* --brand* = nom CANONIQUE de la marque (commun React + web). Côté web il vaut la même
     couleur que --accent ; à PRÉFÉRER à --accent pour le code neuf, car dans le design system
     React --accent désigne une surface de survol sombre (sens différent → collision de nom). */
  --brand:var(--accent); --brand-2:var(--accent2); --brand-soft:var(--accent-soft);
  --muted:rgba(255,255,255,.48); /* .45→.48 : contraste WCAG ≥ 4.5:1 une fois posé sur --row #181c27 (SonarCloud S7924) */
  --modal:#181826;
  --nav-h:60px;
}

body{
  background:var(--bg);
  color:#fff;
  /* Inter en premier : actif sur les pages qui lient fonts.css (refonte direction A),
     repli Segoe UI partout ailleurs. */
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  min-height:100vh;
}

/* ── Accessibilité : focus visible au clavier ──────────────────────────────
   Anneau de focus cohérent sur tout élément interactif atteint au CLAVIER
   (:focus-visible ne s'affiche pas au clic souris). Couvre liens, boutons,
   champs et tout élément rendu focusable. `:where()` garde une spécificité
   nulle et `!important` neutralise les resets `outline:0/none` épars
   (studio.css, login…). Couleur = --accent (source de vérité du focus). */
:where(a[href],button,input,select,textarea,summary,[tabindex],[role="button"]):focus-visible{
  outline:2px solid var(--accent)!important;
  outline-offset:2px;
}

/* Sélecteur de langue (FR/EN/TR) — présent sur presque toutes les pages */
.lang-sw{display:inline-flex;gap:6px}
.lang-btn{
  background:none;border:1px solid rgba(255,255,255,.12);border-radius:6px;
  color:rgba(255,255,255,.45);font-size:.7rem;font-weight:700;padding:4px 9px;
  cursor:pointer;font-family:inherit;line-height:1.4;transition:.15s;
}
.lang-btn.active,.lang-btn:hover{background:#23232a;color:#fff;border-color:rgba(255,255,255,.28)}