/* ==========================================================================
   variables.css
   Jetons de design (design tokens). Toute couleur, taille ou espacement
   utilisé ailleurs dans le site doit passer par une variable définie ici.
   ========================================================================== */

:root {
  /* ---- Typographie ---- */
  --font-display: "Space Mono", "Courier New", monospace;
  --font-body: "IBM Plex Mono", "Consolas", monospace;

  --fs-000: 0.75rem;   /* légendes, métadonnées */
  --fs-00: 0.875rem;   /* texte secondaire */
  --fs-0: 1rem;        /* texte courant */
  --fs-1: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-3: clamp(2rem, 1.5rem + 2vw, 3rem);

  --lh-tight: 1.15;
  --lh-normal: 1.6;

  /* ---- Espacements ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* ---- Structure ---- */
  --radius: 3px;
  --border-width: 1px;
  --max-width: 76rem;
  --terminal-bar-height: 2.25rem;

  /* ---- Vitesses d'animation ---- */
  --speed-fast: 120ms;
  --speed-normal: 220ms;
  --speed-cursor: 900ms;
}

/* ==========================================================================
   Thème sombre — phosphore ambre sur noir quasi pur (par défaut)
   ========================================================================== */
:root,
html[data-theme="dark"] {
  --color-bg: #14181a;
  --color-bg-elevated: #1e2523;
  --color-bg-inset: #0f1213;
  --color-border: #2c3730;
  --color-border-strong: #46564b;

  --color-text: #cfd6cf;
  --color-text-dim: #7d8d82;
  --color-text-bright: #f5f9f3;

  --color-accent: #ffb454;       /* ambre — accent principal */
  --color-accent-contrast: #1a1300;
  --color-ok: #6bcf8f;           /* vert phosphore — succès / git */
  --color-info: #7ecbe0;         /* cyan — liens / vidéo */
  --color-danger: #ff6f6b;       /* rouge — erreurs / fermeture */

  --shadow-window: 0 20px 60px -20px rgba(0, 0, 0, 0.55);
  --scanline-opacity: 0.03;
}

/* ==========================================================================
   Thème clair — gris neutre clair, cartes blanches, pas de teinte olive
   ========================================================================== */
html[data-theme="light"] {
  --color-bg: #f6f6f4;
  --color-bg-elevated: #ffffff;
  --color-bg-inset: #ececea;
  --color-border: #dcdcd8;
  --color-border-strong: #bcbcb6;

  --color-text: #20241f;
  --color-text-dim: #5e665f;
  --color-text-bright: #0a0d0a;

  --color-accent: #a85a00;
  --color-accent-contrast: #fffaf0;
  --color-ok: #227a4c;
  --color-info: #1668a0;
  --color-danger: #b23524;

  --shadow-window: 0 20px 60px -24px rgba(32, 36, 31, 0.18);
  --scanline-opacity: 0.015;
}