/* ==========================================================================
   Deckstock — Design system « Pro Comptoir » · tokens.css
   Charte FIGÉE : Encre #12203A · Ambre #FF7A1A · Vert marge #1FB979
   Rouge alerte #E5484D · Blanc cassé #F5F7FB · Neutres #5A6785 / #E2E7F0
   Deux thèmes : [data-theme="clair"] (défaut, admin) · [data-theme="sombre"] (scan)
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     1. Couleurs de charte (primitives — ne jamais modifier)
     ------------------------------------------------------------------ */
  --encre:        #12203A;
  --ambre:        #FF7A1A;
  --vert-marge:   #1FB979;
  --rouge-alerte: #E5484D;
  --blanc-casse:  #F5F7FB;
  --neutre-texte:   #5A6785;
  --neutre-bordure: #E2E7F0;

  /* ------------------------------------------------------------------
     2. Déclinaisons sombres dérivées de l'Encre (thème scan)
     ------------------------------------------------------------------ */
  --encre-900: #0B1526;   /* fond sombre profond */
  --encre-850: #0D1830;   /* fond sombre alternatif */
  --encre-800: #14233D;   /* surface sombre */
  --encre-700: #1B2E4E;   /* surface sombre surélevée / survol */
  --encre-600: #24365A;   /* bordure sombre */
  --encre-500: #34497A;   /* bordure sombre appuyée */

  /* ------------------------------------------------------------------
     3. Dérivés d'usage (accessibilité AA — textes et interactions)
     ------------------------------------------------------------------ */
  --ambre-vif:    #F26D0D;  /* survol CTA en thème clair */
  --ambre-clair:  #FF8F3F;  /* survol CTA en thème sombre */
  --ambre-fonce:  #C25400;  /* texte ambre lisible sur fond clair (AA) */
  --ambre-pale:   #FFF0E2;  /* fond pâle accent, thème clair */
  --vert-fonce:   #0E7A52;  /* texte vert lisible sur fond clair (AA) */
  --vert-clair:   #4CD79A;  /* texte vert lisible sur fond sombre */
  --vert-pale:    #E4F7EE;
  --rouge-fonce:  #C42F36;  /* texte rouge + CTA danger (AA sur clair) */
  --rouge-clair:  #F0767A;  /* texte rouge lisible sur fond sombre */
  --rouge-pale:   #FDEAEB;
  --bleu-info:       #2F6FE4;
  --bleu-info-fonce: #1D4FC4;
  --bleu-info-clair: #8FB3F7;
  --bleu-pale:       #E9F0FD;

  /* ------------------------------------------------------------------
     4. Espacements — échelle 4 / 8 / 12 / 16 / 24 / 32 / 48
     ------------------------------------------------------------------ */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;

  /* ------------------------------------------------------------------
     5. Rayons
     ------------------------------------------------------------------ */
  --rayon-petit: 10px;
  --rayon:       14px;
  --rayon-grand: 20px;
  --rayon-rond:  999px;

  /* ------------------------------------------------------------------
     6. Ombres (discrètes)
     ------------------------------------------------------------------ */
  --ombre-1: 0 1px 2px rgba(18, 32, 58, 0.06);
  --ombre-2: 0 2px 8px rgba(18, 32, 58, 0.08), 0 1px 2px rgba(18, 32, 58, 0.05);
  --ombre-3: 0 12px 32px rgba(18, 32, 58, 0.18), 0 2px 8px rgba(18, 32, 58, 0.08);

  /* ------------------------------------------------------------------
     7. Typographie
     ------------------------------------------------------------------ */
  --police-titre: "Space Grotesk", "Inter", system-ui, sans-serif;
  --police-ui:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --taille-11: 0.6875rem;   /* 11px — onglets mobile, mentions */
  --taille-12: 0.75rem;     /* 12px — badges, aides, en-têtes de table */
  --taille-13: 0.8125rem;   /* 13px — libellés, texte dense */
  --taille-14: 0.875rem;    /* 14px — texte courant tableaux */
  --taille-15: 0.9375rem;   /* 15px — texte courant, boutons */
  --taille-17: 1.0625rem;   /* 17px — titres de carte */
  --taille-20: 1.25rem;     /* 20px — titres de section */
  --taille-24: 1.5rem;      /* 24px — titres de page */
  --taille-28: 1.75rem;     /* 28px — valeurs KPI */
  --taille-34: 2.125rem;    /* 34px — grands chiffres écran scan */

  --graisse-normale:   400;
  --graisse-moyenne:   500;
  --graisse-demi:      600;
  --graisse-grasse:    700;

  --interligne-serre:  1.2;
  --interligne-normal: 1.5;

  /* ------------------------------------------------------------------
     8. Transitions
     ------------------------------------------------------------------ */
  --transition-rapide: 120ms cubic-bezier(0.2, 0, 0, 1);
  --transition:        200ms cubic-bezier(0.2, 0, 0, 1);
  --transition-lente:  320ms cubic-bezier(0.2, 0, 0, 1);

  /* ------------------------------------------------------------------
     9. Palette catégorielle graphiques (lisible sur clair ET sombre)
     ------------------------------------------------------------------ */
  --graph-1: #4E7FE8;   /* bleu (famille Encre) */
  --graph-2: #FF7A1A;   /* ambre charte */
  --graph-3: #1FB979;   /* vert marge charte */
  --graph-4: #9A7BF0;   /* violet */
  --graph-5: #2FB6C9;   /* turquoise */
  --graph-6: #E0629C;   /* rose */
}

/* ==========================================================================
   THÈME CLAIR (défaut) — desktop admin
   ========================================================================== */
:root,
[data-theme="clair"] {
  color-scheme: light;

  --fond:             var(--blanc-casse);
  --surface:          #FFFFFF;
  --surface-2:        #EEF2F8;
  --texte:            var(--encre);
  --texte-secondaire: var(--neutre-texte);
  --texte-inverse:    var(--blanc-casse);
  --bordure:          var(--neutre-bordure);
  --bordure-forte:    #C9D2E3;
  --survol:           #F2F5FA;

  --accent:        var(--ambre);
  --accent-survol: var(--ambre-vif);
  --accent-texte:  var(--ambre-fonce);
  --accent-pale:   var(--ambre-pale);
  --sur-accent:    var(--encre);      /* texte posé sur un aplat ambre */

  --succes:        var(--vert-marge);
  --succes-texte:  var(--vert-fonce);
  --succes-pale:   var(--vert-pale);

  --danger:        var(--rouge-alerte);
  --danger-texte:  var(--rouge-fonce);
  --danger-pale:   var(--rouge-pale);
  --danger-cta:    var(--rouge-fonce);

  --info:          var(--bleu-info);
  --info-texte:    var(--bleu-info-fonce);
  --info-pale:     var(--bleu-pale);

  --attention-texte: #9A4B00;
  --attention-pale:  #FFF2E0;

  --toast-fond:  var(--encre);
  --toast-texte: var(--blanc-casse);
  --voile:       rgba(18, 32, 58, 0.55);
  --anneau:      var(--ambre);

  /* Puces par jeu — clair : fond pâle + texte foncé (AA) */
  --jeu-pokemon-fond:    #FBF1CD;  --jeu-pokemon-texte:    #7A5C00;
  --jeu-yugioh-fond:     #EFEAFB;  --jeu-yugioh-texte:     #5B3EB4;
  --jeu-magic-fond:      #F6ECDC;  --jeu-magic-texte:      #7D5316;
  --jeu-onepiece-fond:   #E7EEFD;  --jeu-onepiece-texte:   #1D4FC4;
  --jeu-lorcana-fond:    #E0F4F1;  --jeu-lorcana-texte:    #0C7A6F;
  --jeu-naruto-fond:     #EAF4DE;  --jeu-naruto-texte:     #44751B;
  --jeu-dragonball-fond: #FCE9DF;  --jeu-dragonball-texte: #AE3D12;
  --jeu-autre-fond:      #EDF0F6;  --jeu-autre-texte:      #4A5670;
}

/* ==========================================================================
   THÈME SOMBRE — écrans de scan
   ========================================================================== */
[data-theme="sombre"] {
  color-scheme: dark;

  --fond:             var(--encre-900);
  --surface:          var(--encre-800);
  --surface-2:        var(--encre-700);
  --texte:            var(--blanc-casse);
  --texte-secondaire: #9AA8C7;
  --texte-inverse:    var(--encre);
  --bordure:          var(--encre-600);
  --bordure-forte:    var(--encre-500);
  --survol:           var(--encre-700);

  --accent:        var(--ambre);
  --accent-survol: var(--ambre-clair);
  --accent-texte:  #FFA45C;
  --accent-pale:   #3A2712;
  --sur-accent:    var(--encre);

  --succes:        var(--vert-marge);
  --succes-texte:  var(--vert-clair);
  --succes-pale:   #103526;

  --danger:        var(--rouge-alerte);
  --danger-texte:  var(--rouge-clair);
  --danger-pale:   #3B1A20;
  --danger-cta:    var(--rouge-fonce);

  --info:          var(--bleu-info-clair);
  --info-texte:    var(--bleu-info-clair);
  --info-pale:     #16294D;

  --attention-texte: #FFB067;
  --attention-pale:  #3A2712;

  --toast-fond:  var(--encre-700);
  --toast-texte: var(--blanc-casse);
  --voile:       rgba(4, 9, 18, 0.68);
  --anneau:      #FFA45C;

  /* Puces par jeu — sombre : fond foncé teinté + texte pâle */
  --jeu-pokemon-fond:    #322A0D;  --jeu-pokemon-texte:    #F5D14E;
  --jeu-yugioh-fond:     #271F44;  --jeu-yugioh-texte:     #BCA8F5;
  --jeu-magic-fond:      #31240F;  --jeu-magic-texte:      #E0A96D;
  --jeu-onepiece-fond:   #16294D;  --jeu-onepiece-texte:   #8FB3F7;
  --jeu-lorcana-fond:    #0F332E;  --jeu-lorcana-texte:    #5AD6C6;
  --jeu-naruto-fond:     #1E3113;  --jeu-naruto-texte:     #A8D97B;
  --jeu-dragonball-fond: #3A1F12;  --jeu-dragonball-texte: #F79E70;
  --jeu-autre-fond:      #1E2A44;  --jeu-autre-texte:      #AEBBD6;

  /* Graphiques : variantes pour le fond sombre — palette validée le 02/07/2026
     (validate_palette.js en Chromium headless, surface #14233D : bande de
     luminance OKLCH 0.48–0.67, chroma, ΔE daltonisme, contraste ≥ 3:1). */
  --graph-1: #5B88EA;
  --graph-2: #E56A00;
  --graph-3: #17A86D;
  --graph-4: #9B79EF;
  --graph-5: #21A5B8;
  --graph-6: #D85192;
}

/* ==========================================================================
   Bases typographiques et utilitaires
   ========================================================================== */
html {
  font-family: var(--police-ui);
  color: var(--texte);
  background-color: var(--fond);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Chiffres tabulaires : à appliquer partout où des nombres s'alignent
   (tableaux, KPI, prix, quantités) */
.dk-chiffres {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}