/*
 * Jetons du design system « LED IT Studio » (claude.ai, Design System).
 * Mêmes noms et mêmes valeurs que son tokens.json : thème clair par défaut,
 * thème sombre selon le réglage de l'appareil. Aucune couleur n'est écrite
 * en dur ailleurs, sauf dans le bandeau de jeu (identité propre à chaque jeu).
 */

/* Polices auto-hébergées (licence SIL OFL 1.1, fichiers OFL-*.txt à côté). */
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/Newsreader-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/HankenGrotesk-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Couleurs — thème « clair » */
  --paper: #f4f6f6;
  --surface: #ffffff;
  --surface-sunken: #e9eded;
  --line: #d3dadb;
  --ink: #101416;
  --ink-soft: #4a5458;
  --accent: #0a6a72;
  --on-accent: #ffffff;
  --accent-tint: #ddeeef;

  /* Typographie */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-text: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Espacements */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 32px;
  --space-4: 64px;
  --space-5: 96px;

  /* Rayons */
  --radius-s: 4px;
  --radius-m: 10px;
  --radius-full: 999px;

  /* Ombre (menus flottants uniquement) */
  --shadow-float: 0 12px 32px rgba(16, 20, 22, 0.1);

  /* Mise en page */
  --content-width: 65rem;
  --text-width: 44rem;

  /* Bandeau de jeu Lettrain : identité « Néon » du jeu, identique dans les deux thèmes */
  --game-night: #0b0d17;
  --game-tile: #eef1ff;
  --game-track: #3a4170;
  --game-neon: #4de8f0;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* Couleurs — thème « sombre » */
    --paper: #0d1113;
    --surface: #151b1e;
    --surface-sunken: #090c0e;
    --line: #283135;
    --ink: #e8eced;
    --ink-soft: #a1abaf;
    --accent: #62cdd5;
    --on-accent: #0d1113;
    --accent-tint: #12292c;

    --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.45);
  }
}