/* ===========================================================================
   TCG Vault — TOKENS (charte graphique « Papier Sécurité »)
   Source unique de vérité. Pour faire évoluer le look : on touche ICI.
   =========================================================================== */
:root {
  /* --- Surfaces & encre --- */
  --c-bg:        #E8E4DA;
  --c-bg-2:      #DFD9CB;
  --c-surface:   #F6F2E8;
  --c-surface-2: #FBF8F0;
  --c-ink:       #1C1A17;
  --c-ink-2:     #4A463E;
  --c-ink-3:     #8C8475;
  --c-line:      #D8D0BF;
  --c-line-2:    #C7BDA6;

  /* --- Marque & états --- */
  --c-brand:       #7A5C2E;
  --c-brand-soft:  #EFE6D2;
  --c-ink-active:  #1C1A17;
  --c-on-ink:      #F6F2E8;   /* texte sur fond encre */
  --c-sets:        #7A2E2E;   /* accent rouge de la section Sets */
  --c-value:       #7A2E2E;   /* valeur € (rouge) */
  --c-fab:         #1C1A17;   /* bouton + (noir) */
  --c-up:          #3E7D5A;   /* variation positive (vert) */

  /* --- Accents par jeu --- */
  --game-magic:    #7A2E2E;
  --game-pokemon:  #2E5A7A;
  --game-onepiece: #8A6A1F;

  /* --- Raretés --- */
  --rarity-common:  #8C8475;
  --rarity-rare:    var(--game-magic); /* surchargé par carte selon le jeu */
  --rarity-premium: #9A7B33;
  --foil-1: #cdb86a;
  --foil-2: #e7d9a6;
  --foil-3: #b7c2a8;

  /* --- Typographie --- */
  --font-display: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-16: 16px; --fs-18: 18px; --fs-22: 22px; --fs-28: 28px;

  /* --- Espacement (base 4) --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* --- Rayons --- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;

  /* --- Ombres (chaudes) --- */
  --shadow-1: 0 1px 2px rgba(40,30,15,.06), 0 6px 16px rgba(40,30,15,.07);
  --shadow-2: 0 -2px 10px rgba(40,30,15,.06), 0 -8px 30px rgba(40,30,15,.08);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.5);

  /* --- Mouvement --- */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;
  --ease: cubic-bezier(.2,.7,.2,1);

  /* --- Layout --- */
  --app-max: 480px;
  --header-h: 56px;
  --nav-h: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  --z-header: 30; --z-nav: 40; --z-overlay: 60;
}

/* Garde le contenu lisible si l'utilisateur réduit les animations */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}