/* Loadout Legends — design tokens (source unique : vitrine + application) */
/* Polices de l'identité, servies localement. La vitrine chargeait Space Grotesk et Inter
   depuis Google Fonts : ni la typographie du jeu, ni un chargement maîtrisé — une requête
   tierce à chaque visite pour des caractères qui ne sont pas les nôtres. Les fichiers sont
   partagés avec l'application, un seul exemplaire pour les deux. */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/barlow-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/barlow-condensed-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/barlow-condensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/barlow-condensed-700.woff2') format('woff2'); }

:root {
  /* Fonds : trois profondeurs, du noir de scène au panneau éclairé. */
  --ll-bg: #12131A;
  --ll-bg-deep: #0D0E14;
  --ll-surface: #1B1D26;
  --ll-surface-2: #252834;
  --ll-border: #444653;
  --ll-border-strong: #5A5C6A;

  --ll-text: #F1EDDF;
  --ll-muted: #B8B9C7;
  --ll-subtle: #A1A6B9;

  /* Accents : le violet porte l'action, le champagne porte le prestige. */
  --ll-volt: #B8A2F5;
  --ll-primary: #F1EDDF;
  --ll-on-primary: #12131A;
  --ll-volt-bright: #D0C4F8;
  --ll-volt-dim: #8B9AAB;
  --ll-ion: #E6C68F;
  --ll-ion-dim: #C4A468;
  --ll-danger: #F1AAA7;
  --ll-win: #A8D3BD;
  --ll-loss: #F1AAA7;

  /* Cinq raretés (l'échelon « Icône » a été retiré le 2026-09-14). */
  --ll-rarity-common: #AFB6C5;
  --ll-rarity-uncommon: #A0C7B5;
  --ll-rarity-rare: #A5C9EF;
  --ll-rarity-epic: #C2ACEE;
  --ll-rarity-legendary: #E6C68F;

  --ll-font-display: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --ll-font-text: 'Barlow', system-ui, sans-serif;

  --ll-radius: 12px;
  --ll-radius-lg: 16px;
  --ll-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --ll-shadow-lift: 0 28px 60px -20px rgba(0, 0, 0, .75);
  --ll-clip-card: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  --ll-container: 1200px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--ll-bg);
  color: var(--ll-text);
  font-family: var(--ll-font-text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .ll-display { font-family: var(--ll-font-display); letter-spacing: 0; }
button, [role='button'] { cursor: pointer; font: inherit; }
a { color: var(--ll-ion); text-decoration: none; }

.ll-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: var(--ll-radius); border: 1px solid transparent;
  font-family: var(--ll-font-display); font-weight: 600; font-size: 15px; line-height: 1;
  letter-spacing: .01em;
  transition: transform .14s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.ll-btn:active { transform: translateY(1px); }
.ll-btn:hover { text-decoration: none; }
/* Action en ivoire, comme dans l'application et dans le kit : « petits contrastes ivoire
   pour agir ; violet pour sélection et focus ». La vitrine posait un dégradé violet sur
   ses boutons d'action — le rôle inverse, et une incohérence visible dès qu'on passait du
   site au jeu. */
.ll-btn-primary {
  background: var(--ll-primary);
  color: var(--ll-on-primary);
  box-shadow: 0 10px 28px -14px rgba(0, 0, 0, .8);
}
.ll-btn-primary:hover { background: #FFFBF0; transform: translateY(-2px); }
.ll-btn-ghost { background: rgba(255, 255, 255, .02); color: var(--ll-text); border-color: var(--ll-border-strong); }
.ll-btn-ghost:hover { border-color: var(--ll-volt); color: var(--ll-volt-bright); transform: translateY(-2px); }
.ll-btn-lg { padding: 17px 34px; font-size: 16.5px; }
.ll-btn[disabled], .ll-btn[aria-disabled='true'] { opacity: .45; cursor: not-allowed; }

.ll-card {
  background: var(--ll-surface); border: 1px solid var(--ll-border); border-radius: var(--ll-radius-lg);
  box-shadow: var(--ll-shadow);
}
.ll-eyebrow { font-family: var(--ll-font-display); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ll-muted); }

.rarity-COMMON { --rarity: var(--ll-rarity-common); }
.rarity-UNCOMMON { --rarity: var(--ll-rarity-uncommon); }
.rarity-RARE { --rarity: var(--ll-rarity-rare); }
.rarity-EPIC { --rarity: var(--ll-rarity-epic); }
.rarity-LEGENDARY { --rarity: var(--ll-rarity-legendary); }