/* =========================================================================
   PIQSEL — Design tokens « Arcade 1985 »
   Toute la charte (couleurs, polices, tailles, effets, durées) est ici.
   Documentation : DESIGN.md
   ========================================================================= */

@font-face {
  font-family: 'Press Start 2P';
  src: url('../assets/fonts/press-start-2p-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Pixelify Sans';
  src: url('../assets/fonts/pixelify-sans-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Pixelify Sans';
  src: url('../assets/fonts/pixelify-sans-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* --- Palette arcade --- */
  --c-bg: #10101c; /* fond principal */
  --c-surface: #1d1b30; /* surfaces secondaires */
  --c-surface-2: #29263f; /* surfaces surélevées */
  --c-ink: #07070d; /* « noir sprite » : contours, écran éteint */
  --c-pink: #ff2d95; /* rose néon : action principale */
  --c-cyan: #00e5ff; /* cyan électrique : actions secondaires, focus */
  --c-yellow: #ffe45c; /* jaune arcade : score, curseur, victoire */
  --c-violet: #8b5cf6; /* violet rétro : profondeur, décor */
  --c-text: #f5f5f5; /* texte principal */
  --c-muted: #a9a6c8; /* texte secondaire (≈ 8:1 sur le fond) */
  --c-danger: #ff4d6d;

  /* Ombres « relief » des boutons (teinte sombre de chaque couleur) */
  --c-pink-shade: #a3105b;
  --c-pink-light: #ff7cbf;
  --c-cyan-shade: #00809a;
  --c-yellow-shade: #b39a1c;

  /* Halos néon */
  --glow-pink: 0 0 12px rgb(255 45 149 / 0.55), 0 0 32px rgb(255 45 149 / 0.25);
  --glow-cyan: 0 0 10px rgb(0 229 255 / 0.5), 0 0 26px rgb(0 229 255 / 0.2);
  --glow-yellow: 0 0 10px rgb(255 228 92 / 0.55);

  /* --- Typographie --- */
  /* Press Start 2P : uniquement pour les textes SANS accent (titres arcade, HUD, étiquettes).
     Ses capitales accentuées sont volontairement réduites (grille 8×8) et ressemblent à des minuscules. */
  --font-display: 'Press Start 2P', 'Pixelify Sans', ui-monospace, monospace;
  /* Pixelify Sans gras : boutons et libellés en français (vraies capitales accentuées). */
  --font-ui: 'Pixelify Sans', ui-monospace, monospace;
  --font-pixel: 'Pixelify Sans', ui-monospace, monospace; /* valeurs, statuts */
  --font-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; /* textes lisibles */
  --fs-hud: 10px;
  --fs-btn: clamp(15px, 3.6vw, 18px); /* Pixelify Sans gras */
  --fs-btn-display: clamp(11px, 3vw, 15px); /* Press Start 2P (START) */
  --fs-title: clamp(14px, 3.6vw, 24px);

  /* --- Géométrie pixel --- */
  --px: 4px; /* taille d'un « gros pixel » d'interface (bordures crénelées) */
  --depth: 6px; /* profondeur des boutons physiques */
  --gap: clamp(12px, 2.5vw, 22px);
  --page-max: 1040px;

  /* --- Écran CRT --- */
  --crt-bezel: clamp(8px, 2.2vw, 24px);
  --crt-radius: clamp(10px, 2vw, 22px);
  --crt-scanline-opacity: 0.16; /* 0 = aucune scanline */
  --crt-scanline-size: 3px; /* période des scanlines */
  --crt-vignette: 0.42; /* assombrissement des bords */

  /* --- Mouvement --- */
  --t-fast: 120ms;
  --t-base: 260ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-bounce: cubic-bezier(0.3, 1.5, 0.5, 1);
  --steps: steps(4, end); /* transitions « pixelisées » */

  color-scheme: dark;
}

@media (max-width: 560px) {
  :root {
    --px: 3px;
    --depth: 5px;
  }
}