/* ==========================================================================
   DEAD DROP — Jetons de design & états d'attention (§8 bis.1, §11)
   ========================================================================== */

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/vendor/jetbrains-mono-latin-400.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/vendor/jetbrains-mono-latin-700.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/vendor/ibm-plex-sans-latin-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/vendor/ibm-plex-sans-latin-600.woff2") format("woff2");
}

:root {
  /* Palette principale (§11, D-03) */
  --bg-main: #0B0E12;
  --bg-surface: #121821;
  --bg-surface-elevated: #1A2230;
  --text-primary: #E6EAF0;
  --text-secondary: #8A94A6;
  --accent: #4ADE80;
  --accent-dim: rgba(74, 222, 128, 0.16);
  --accent-border: rgba(74, 222, 128, 0.48);
  --danger: #E5484D;
  --danger-text: #FF8B8E;
  --danger-dim: rgba(229, 72, 77, 0.16);
  --border-subtle: #263144;
  --border-strong: #374763;

  /* Typographie (§11) */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Espacements et rayons */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Cibles tactiles minimales (§11 : >= 44x44 px) */
  --touch-min: 44px;

  /* Transitions courtes (§11 : 150-250 ms) */
  --transition-fast: 150ms ease;
  --transition-state: 250ms ease;

  /* Variables d'état visuel pilotées par body[data-state] (§8 bis.1) */
  --state-filter: none;
  --state-action-opacity: 1;
  --state-banner-border: var(--accent);
  --state-banner-bg: var(--accent-dim);
  --state-banner-fg: var(--accent);
}

/* État 1 : active — pleine couleur, accent terminal (§8 bis.1) */
body[data-state="active"] {
  --state-filter: none;
  --state-action-opacity: 1;
  --state-banner-border: var(--accent);
  --state-banner-bg: var(--accent-dim);
  --state-banner-fg: var(--accent);
}

/* État 2 : everyone — phase collective non encore validée (§8 bis.1) */
body[data-state="everyone"] {
  --state-filter: none;
  --state-action-opacity: 1;
  --state-banner-border: var(--accent);
  --state-banner-bg: var(--accent-dim);
  --state-banner-fg: var(--accent);
}

/* État 3 : waiting — écran grisé, attente d'un autre joueur (§8 bis.1)
   Opacité 0.88 conservant un contraste >= 4.5:1 (WCAG AA) même en niveaux de gris */
body[data-state="waiting"] {
  --state-filter: grayscale(1);
  --state-action-opacity: 0.88;
  --state-banner-border: var(--border-strong);
  --state-banner-bg: var(--bg-surface-elevated);
  --state-banner-fg: var(--text-primary);
}

/* État 4 : eliminated — spectateur éliminé, grisé permanent + tampon (§8 bis.1) */
body[data-state="eliminated"] {
  --state-filter: grayscale(1);
  --state-action-opacity: 0.85;
  --state-banner-border: var(--danger);
  --state-banner-bg: var(--danger-dim);
  --state-banner-fg: var(--danger-text);
}

/* État 5 : offline — connexion perdue, grisé + non interactif (§8 bis.1, §8 bis.5) */
body[data-state="offline"] {
  --state-filter: grayscale(1);
  --state-action-opacity: 0.82;
  --state-banner-border: var(--danger);
  --state-banner-bg: var(--danger-dim);
  --state-banner-fg: var(--danger-text);
}

/* Respect strict de prefers-reduced-motion (§8 bis.1, §11) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-state: 0ms;
  }
}