/*
 * Les copains du Discord — tokens + base
 * À copier dans lcdd-theme/assets/css/tokens.css (les polices dans lcdd-theme/assets/fonts/).
 * Polices auto-hébergées (RGPD : aucune requête vers Google Fonts). Licence OFL 1.1, voir fonts/.
 */

/* ---------- Polices ---------- */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/space-grotesk-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/space-grotesk-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;

  /* Couleurs */
  --lcdd-bg: #0a0a0c;
  --lcdd-surface: #111114;
  --lcdd-surface-2: #17171b;
  --lcdd-surface-3: #1d1d22;
  --lcdd-nav-mobile: #0d0d10;
  --lcdd-line: #25252b;
  --lcdd-line-soft: #1d1d22;
  --lcdd-line-strong: #34343b;
  --lcdd-text: #f1f1ec;
  --lcdd-text-muted: #a3a39c;
  --lcdd-text-faint: #8a8a83;
  --lcdd-accent: #c8ff2e;
  --lcdd-accent-hover: #e3ff8a;
  --lcdd-accent-dim: #3a3f22;
  --lcdd-on-accent: #0a0a0c;
  --lcdd-warning: #ffb547;
  --lcdd-warning-tint: rgba(255, 181, 71, 0.06);
  --lcdd-warning-line: #3a2f1c;
  --lcdd-overlay: rgba(10, 10, 12, 0.8);

  /* Typo */
  --lcdd-font-sans: 'Space Grotesk', system-ui, sans-serif;
  --lcdd-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --lcdd-fs-display: clamp(56px, 9vw, 104px);
  --lcdd-fs-h1: clamp(40px, 6vw, 68px);
  --lcdd-fs-h2: clamp(28px, 3.4vw, 36px);
  --lcdd-fs-h3: 28px;
  --lcdd-fs-card: 22px;
  --lcdd-fs-weapon: 34px;
  --lcdd-fs-lead: 19px;
  --lcdd-fs-body: 16px;
  --lcdd-fs-small: 15px;
  --lcdd-fs-meta: 13px;
  --lcdd-fs-label: 12px;
  --lcdd-fs-tag: 11px;
  --lcdd-fs-stat: clamp(64px, 7vw, 88px);

  /* Espacements */
  --lcdd-s1: 4px;  --lcdd-s2: 8px;  --lcdd-s3: 12px; --lcdd-s4: 16px;
  --lcdd-s5: 20px; --lcdd-s6: 24px; --lcdd-s7: 28px; --lcdd-s8: 32px;
  --lcdd-s10: 40px; --lcdd-s12: 48px; --lcdd-s14: 56px; --lcdd-s18: 72px; --lcdd-s20: 80px;

  /* Rayons */
  --lcdd-r-tag: 5px;
  --lcdd-r-chip: 8px;
  --lcdd-r-control: 10px;
  --lcdd-r-tile: 12px;
  --lcdd-r-card: 14px;
  --lcdd-r-panel: 16px;

  /* Tailles */
  --lcdd-touch: 44px;
  --lcdd-btn: 48px;
  --lcdd-btn-lg: 56px;
  --lcdd-container: 1280px;
  --lcdd-gutter: 32px;
  --lcdd-bracket: 18px;

  /* Mouvement */
  --lcdd-ease: cubic-bezier(0.2, 0, 0, 1);
  --lcdd-fast: 120ms;
  --lcdd-base: 180ms;
}

@media (max-width: 640px) {
  :root { --lcdd-gutter: 20px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* L'attribut hidden l'emporte toujours sur les display des composants (onglets…) */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--lcdd-bg);
  color: var(--lcdd-text);
  font-family: var(--lcdd-font-sans);
  font-size: var(--lcdd-fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; color: var(--lcdd-text); font-family: var(--lcdd-font-sans); }
h1 { font-size: var(--lcdd-fs-h1); line-height: 0.98; font-weight: 700; letter-spacing: -0.035em; }
h2 { font-size: var(--lcdd-fs-h2); line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; }
h3 { font-size: var(--lcdd-fs-card); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }

a { color: var(--lcdd-accent); text-underline-offset: 3px; transition: color var(--lcdd-fast) var(--lcdd-ease); }
a:hover { color: var(--lcdd-accent-hover); }

:focus-visible { outline: 2px solid var(--lcdd-accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--lcdd-accent); color: var(--lcdd-on-accent); }
::placeholder { color: var(--lcdd-text-faint); }

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