/* ============================================================
   tokens.css — Système de design centralisé AnotherVerse
   SOURCE UNIQUE DE VÉRITÉ. Ne pas redéclarer ces variables ailleurs ;
   les pages doivent référencer var(--…) au lieu de coder en dur.
   Toutes les valeurs reprennent l'existant (Premium Dark) → aucun
   changement visuel à l'introduction.
   ============================================================ */
:root{

  /* ── Marque / accent ────────────────────────────────────
     --accent-rgb permet les rgba() dynamiques : rgba(var(--accent-rgb),.2) */
  /* Bascule ORANGE → CYAN (19 juil. 2026) : identité Code Lyoko, alignée sur
     la plongée N.E.X.U.S du combat. L'or (--gold/--accent2) est CONSERVÉ :
     il porte les raretés et les récompenses, ce n'est pas une couleur de marque. */
  --accent-rgb:47,214,214;
  --accent:#2fd6d6;            /* cyan principal */
  --accent-600:#22b3b3;       /* hover/pressed (plus sombre) */
  --accent-400:#5fe4e4;       /* survol clair */
  --accent-text:#7fe6e6;      /* texte fin sur fond noir (contraste AA) */
  --accent2:#ffb800;          /* or secondaire — inchangé */
  --gold:#ffb800;
  --orange:#2fd6d6;           /* alias historique — pointe désormais sur l'accent */

  /* ── Fonds (du plus profond au plus clair) ── */
  --bg:#0c0c0c;               /* fond global */
  --bg-0:#0c0c0c;
  --bg-1:#141418;
  --bg-2:#1a1a20;
  --card:rgba(20,20,24,.9);
  --card2:rgba(26,26,32,.9);
  --glass:rgba(20,20,24,.8);
  --glass-border:rgba(47,214,214,.15);
  --border:rgba(255,255,255,.07);
  --card-hover-border:rgba(47,214,214,.28);

  /* ── Texte (du plus lisible au plus discret) ── */
  --text:#f0f0f0;
  --text2:#707070;
  --text3:#454545;

  /* ── Couleurs d'état / sémantiques ── */
  --red:#ff3b5c;
  --green:#30d158;
  --teal:#3ecfc6;
  --warn:#ffb800;

  /* ── Couleurs d'accent (alias historiques) ── */
  --c:#4a90d9;                /* bleu */
  --n:#ff6b00;                /* orange (alias historique) */
  --op:#e8a000;               /* ambre (alias historique) */

  /* ── Raretés (cartes, gacha, collection) ──
     opt-in : référence ces tokens via .card[data-rarity] */
  --rarity-common:#8a8a92;
  --rarity-rare:#3ea6ff;
  --rarity-epic:#b15cff;
  --rarity-super:#ff5cc8;     /* super rare (éveils) */
  --rarity-legendary:#ffb800;
  --rarity-mythique:#ff3b5c;

  /* ── Espacement (échelle 4px) ── */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;

  /* ── Rayons ── */
  --radius-sm:8px;
  --radius-md:14px;
  --radius:18px;              /* défaut historique = lg */
  --radius-lg:18px;
  --radius-pill:999px;

  /* ── Typographie ── */
  --ff-body:'Inter',sans-serif;
  --ff-display:'Orbitron',sans-serif;   /* gros titres / chiffres */
  --ff-title:'Rajdhani',sans-serif;     /* sous-titres */
  --ff-serif:'Cinzel',serif;            /* habillage manga */
  --fs-xs:12px;
  --fs-sm:13px;
  --fs-base:15px;
  --fs-md:17px;
  --fs-lg:20px;
  --fs-xl:26px;
  --fs-2xl:34px;
  --lh-tight:1.2;
  --lh-base:1.5;

  /* ── Ombres ── */
  --shadow-sm:0 2px 8px rgba(0,0,0,.35);
  --shadow-md:0 4px 16px rgba(0,0,0,.45);
  --shadow-card:0 8px 40px rgba(0,0,0,.5);
  --shadow-btn:0 4px 16px rgba(47,214,214,.28);
  --shadow-glow:0 0 24px rgba(47,214,214,.35);

  /* ── Mouvement (une seule courbe / durées cohérentes) ── */
  --ease:cubic-bezier(.2,.8,.2,1);
  --t-fast:.12s;
  --t:.18s;
  --t-slow:.32s;

  /* ── Hauteurs de chrome (header / navbar / sous-nav) ── */
  --hh:90px;
  --bnh:66px;
  --snh:52px;

  /* ── Z-index (échelle nommée — cohérente avec le shell bureau) ── */
  --z-base:1;
  --z-hud:90;       /* HUD de carte sous les fenêtres */
  --z-nav:120;
  --z-window:150;   /* fenêtres du shell bureau */
  --z-modal:1000;
  --z-toast:2000;
}

/* Le header mobile garde sa hauteur compacte et son espacement historique. */
@media(max-width:560px){
  :root{--hh:62px}
}