/* ════════════════════════════════════════════════════════
   TOKENS.CSS — Variables de design & thèmes
   MateXP · Source unique de vérité pour couleurs, échelles,
   espacements, rayons et profondeurs. Aucune valeur en dur
   ailleurs dans le projet.
   ════════════════════════════════════════════════════════ */

/* ─── Polices AUTO-HÉBERGÉES (perf + RGPD : aucune connexion Google) ───
   woff2 dans /fonts/, subsets latin + latin-ext, font-display:swap.
   Familles identiques (Outfit/Inter/Dancing Script) → tokens & hero inchangés.
   Poids répliqués à l'identique du service Google : Outfit 500/600/700/800,
   Inter 200/300/400/500, Dancing Script 700. unicode-range verbatim Google
   (le latin couvre é è à ç ù ET œ → accents FR garantis). Licences SIL OFL
   dans /fonts/OFL-*.txt. Hero préchargé via <link rel=preload> sur index.html. */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/dancing-script-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/dancing-script-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('/fonts/inter-200-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('/fonts/inter-200-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/inter-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/inter-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/outfit-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/outfit-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/outfit-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/outfit-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/outfit-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/outfit-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/outfit-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/outfit-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono 700 (subset latin) — chiffres signature de la carte joueur
   (score, %, sessions, n° de série). Self-hosté comme Outfit/Inter. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Familles typographiques */
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  --font-script:  'Dancing Script', 'Segoe Script', cursive; /* signature manuscrite (lettre du fondateur) */

  /* ─── Échelle typographique : Tierce Majeure 1.250 ─── */
  --text-2xs: 0.512rem;  /* 8.2px  — micro    */
  --text-xs:  0.64rem;   /* 10.2px — captions */
  --text-sm:  0.8rem;    /* 12.8px — labels   */
  --text-md:  1rem;      /* 16px   — corps    */
  --text-lg:  1.25rem;   /* 20px   — lead     */
  --text-xl:  1.563rem;  /* 25px   — H3       */
  --text-2xl: 1.953rem;  /* 31px   — H2       */
  --text-3xl: 2.441rem;  /* 39px   — H1 sm    */
  --text-4xl: 3.052rem;  /* 49px   — H1 md    */
  --text-5xl: 4.768rem;  /* 76px   — H1 hero  */

  /* ─── Espacements : base 4px ─── */
  --sp-px: 1px;
  --sp-1:  4px;   --sp-2:  8px;   --sp-3:  12px;
  --sp-4:  16px;  --sp-5:  20px;  --sp-6:  24px;
  --sp-8:  32px;  --sp-10: 40px;  --sp-12: 48px;
  --sp-16: 64px;  --sp-20: 80px;  --sp-24: 96px;
  --sp-32: 128px; --sp-40: 160px;

  /* ─── Rayons ─── */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-full: 9999px;

  /* ─── Profondeurs (z-index) ─── */
  --z-base:    1;
  --z-raised:  10;
  --z-overlay: 100;
  --z-nav:     300;
  --z-modal:   350;  /* au-dessus de la nav : un modal/bottom-sheet couvre la bottom-nav */
  --z-toast:   400;

  /* Flou du voile des fenêtres (modales, bottom-sheet, Moment Match, score).
     Non thématique → vit ici ; la COULEUR du voile, elle, est --scrim (par thème). */
  --scrim-blur: blur(4px);

  /* ─── Hauteur de la barre du haut (navbar publique == topbar app) ─── */
  --topbar-h: 60px;

  /* ─── MARQUE (socle DA — étape 1) ───
     Tokens de marque GLOBAUX, thème-indépendants et ADDITIFS : ils ne
     remplacent ni l'accent app (--accent lavande), ni les tokens .lp
     (landing), ni --pc-* (carte).
     --grad-brand = LE dégradé de marque canonique. Hexes exacts de la
     carte (player-card.css : .pcx-btn.pri / .pcx-edpill / .pcf-band),
     ANGLE UNIFIÉ : 95° (décision DA). landing.css --grad-strong et
     --grad-warm sont ALIGNÉS sur cette référence (95°) — plus aucun
     angle de marque à 135° ; ne pas créer de nouvelle variante.
     Place réservée aux prochains tokens du socle (briques suivantes) :
     · surface élevée (relief carte dilué : lèvre / assise / cerne / glow)
     · plaque striée 52° (badges édition / statut)
     · (le FOIL --pc-foil reste scopé carte à dessein — joyau, jamais global) */
  --grad-brand: linear-gradient(95deg, #7C5CFC, #FF6B9D);
}

/* ════════════════════════════════════════════════════════
   THÈME SOMBRE (défaut) — appliqué à dark et auto
   ════════════════════════════════════════════════════════ */
[data-theme="dark"],
[data-theme="auto"] {
  --bg-0: #07050f;
  --bg-1: #0d0b14;
  --bg-2: #1a1625;
  --bg-3: #241e36;
  --bg-4: #2e2747;
  --bg-5: #3a3358;

  --text-1: #ffffff;
  --text-2: #e2d9f3;
  --text-3: #c4b8e8;
  --text-4: #8b7bb5;
  --text-5: #4a3d6a;

  /* Accent = INDIGO de marque (#7C5CFC, canon carte --pc-ind) — bascule
     lavande→indigo tranche 1 (THÈME SOMBRE seul, le clair était déjà
     quasi de marque). Doctrine : alphas identiques au lavande, nudge
     uniquement sur constat device. --accent-fg : décision à part. */
  --accent:       #7C5CFC;
  --accent-hover: #8E73FC;
  --accent-fg:    #0d0b14;
  --accent-dim:   rgba(124, 92, 252, 0.12);
  --accent-glow:  rgba(124, 92, 252, 0.06);
  --accent-deep:  #7c3aed;

  --success: #4ade80;
  --warning: #facc15;
  --danger:  #f87171;
  --info:    #60a5fa;

  /* Niveau « Légende » du score de fiabilité (jaune vif sur fond sombre) */
  --score-legend: #facc15;

  --border-0:     rgba(124, 92, 252, 0.05);
  --border-1:     rgba(124, 92, 252, 0.09);
  --border-2:     rgba(124, 92, 252, 0.15);
  --border-3:     rgba(124, 92, 252, 0.28);
  --border-focus: var(--accent);

  --nav-bg:   rgba(13, 11, 20, 0.88);
  --nav-blur: saturate(200%) blur(24px);

  /* Voile des fenêtres modales — source UNIQUE de tout assombrissement de page. */
  --scrim: rgba(7, 5, 15, 0.7);

  --selection-bg:   rgba(124, 92, 252, 0.3);
  --selection-text: #ffffff;

  --scrollbar-thumb: rgba(124, 92, 252, 0.2);
  --scrollbar-track: transparent;

  color-scheme: dark;
}

/* ════════════════════════════════════════════════════════
   THÈME CLAIR — choix explicite de l'utilisateur
   ════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg-0: #f0ecff;
  --bg-1: #faf9ff;
  --bg-2: #f5f2ff;
  --bg-3: #ede8ff;
  --bg-4: #e4dcff;
  --bg-5: #d9d0ff;

  --text-1: #1a0a2e;
  --text-2: #2d1b4e;
  --text-3: #3d2b5c;
  --text-4: #6d5a8a;
  --text-5: #a090c0;

  --accent:       #7c3aed;
  --accent-hover: #6d28d9;
  --accent-fg:    #ffffff;
  --accent-dim:   rgba(124, 58, 237, 0.1);
  --accent-glow:  rgba(124, 58, 237, 0.05);
  --accent-deep:  #5b21b6;

  --success: #16a34a;
  --warning: #d97706;
  --danger:  #dc2626;
  --info:    #2563eb;

  /* Niveau « Légende » assombri pour rester lisible sur fond clair (WCAG AA) */
  --score-legend: #a16207;

  --border-0:     rgba(124, 58, 237, 0.05);
  --border-1:     rgba(124, 58, 237, 0.09);
  --border-2:     rgba(124, 58, 237, 0.15);
  --border-3:     rgba(124, 58, 237, 0.3);
  --border-focus: var(--accent);

  --nav-bg:   rgba(250, 249, 255, 0.88);
  --nav-blur: saturate(200%) blur(24px);

  /* Voile : encre VIOLETTE de la marque (jamais un gris neutre = sale) et alpha
     plus bas — la page dessous est claire, un voile à 0.7 la passerait en nuit. */
  --scrim: rgba(26, 10, 46, 0.44);

  --selection-bg:   rgba(124, 58, 237, 0.2);
  --selection-text: #1a0a2e;

  --scrollbar-thumb: rgba(124, 58, 237, 0.2);
  --scrollbar-track: transparent;

  color-scheme: light;
}

/* ════════════════════════════════════════════════════════
   MODE AUTO — suit le système. Copie exacte du thème clair
   appliquée uniquement si l'OS est en clair.
   ════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    --bg-0: #f0ecff;
    --bg-1: #faf9ff;
    --bg-2: #f5f2ff;
    --bg-3: #ede8ff;
    --bg-4: #e4dcff;
    --bg-5: #d9d0ff;

    --text-1: #1a0a2e;
    --text-2: #2d1b4e;
    --text-3: #3d2b5c;
    --text-4: #6d5a8a;
    --text-5: #a090c0;

    --accent:       #7c3aed;
    --accent-hover: #6d28d9;
    --accent-fg:    #ffffff;
    --accent-dim:   rgba(124, 58, 237, 0.1);
    --accent-glow:  rgba(124, 58, 237, 0.05);
    --accent-deep:  #5b21b6;

    --success: #16a34a;
    --warning: #d97706;
    --danger:  #dc2626;
    --info:    #2563eb;

    /* Niveau « Légende » assombri pour rester lisible sur fond clair (WCAG AA) */
    --score-legend: #a16207;

    --border-0:     rgba(124, 58, 237, 0.05);
    --border-1:     rgba(124, 58, 237, 0.09);
    --border-2:     rgba(124, 58, 237, 0.15);
    --border-3:     rgba(124, 58, 237, 0.3);
    --border-focus: var(--accent);

    --nav-bg:   rgba(250, 249, 255, 0.88);
    --nav-blur: saturate(200%) blur(24px);

    /* Voile clair — cf. [data-theme="light"] */
    --scrim: rgba(26, 10, 46, 0.44);

    --selection-bg:   rgba(124, 58, 237, 0.2);
    --selection-text: #1a0a2e;

    --scrollbar-thumb: rgba(124, 58, 237, 0.2);
    --scrollbar-track: transparent;

    color-scheme: light;
  }
}

/* ─── Sélection de texte ─── */
::selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}

/* ─── Barre de défilement personnalisée (CSS seul, pas de JS) ─── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--r-full);
}
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}