/* zeyi-symfony/assets/styles/tokens.css

   Deux thèmes, sombre par défaut. Les jetons sont sémantiques (« le fond »,
   « la surface d'une carte »), jamais littéraux : c'est ce qui permet de
   changer de thème sans toucher aux feuilles de style qui les consomment.

   Le choix du visiteur est posé sur <html data-theme="…"> par un court script
   exécuté avant la feuille de style, et conservé dans son navigateur. Sans
   choix, le thème sombre s'applique : c'est l'identité voulue, on ne suit
   donc pas prefers-color-scheme. */

:root {
  /* Fonds — le fond de page reprend le brun profond déjà utilisé par le pied
     de page et le bandeau de chiffres, composants éprouvés sur cette teinte. */
  --bg: #241c17;
  --bg-alt: #1b1511;
  --surface: #30261f;
  --dark: #1b1511;
  --dark-soft: #30261f;

  /* Texte */
  --text: #f7f3ec;
  --text-muted: #b9aa9c;
  --text-on-dark: #f7f3ec;
  --text-on-dark-muted: #b9aa9c;

  /* Accent — l'orange de la maquette. Plus vif que le #d2600f du thème clair,
     parce qu'un orange terne sur fond sombre tombe sous le seuil de lisibilité
     du petit texte (4,32 contre 5,66 mesurés). */
  --orange: #e87722;
  --orange-dark: #d2600f;
  --orange-soft: #3a2a1c;
  --orange-contrast: #1b1511;

  /* Traits et ombres — sur fond sombre une ombre ne se voit pas : ce sont les
     traits qui séparent les plans. */
  --border: #3d3129;
  --border-strong: #52433a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.45);

  /* Rayons */
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Rythme */
  --gutter: 24px;
  --wrap: 1200px;
  --section-y: 104px;
  --section-y-sm: 64px;

  /* Typographie */
  --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-sans: 'DM Sans', system-ui, -apple-system, Arial, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'Courier New', monospace;

  /* Le logo est un lettrage blanc sur fond transparent : il se pose tel quel
     sur le thème sombre, et doit être inversé sur le thème clair. */
  --logo-filter: none;
}

/* Thème clair : la palette du site telle qu'elle existait, conservée à
   l'identique. Elle n'est pas une variante dégradée du sombre, c'est un
   habillage à part entière que le visiteur peut choisir. */
:root[data-theme='light'] {
  --bg: #f7f3ec;
  --bg-alt: #f0e9de;
  --surface: #ffffff;
  --dark: #241c17;
  --dark-soft: #33271f;

  --text: #241c17;
  --text-muted: #7a6e64;
  --text-on-dark: #f7f3ec;
  --text-on-dark-muted: #b9aa9c;

  --orange: #d2600f;
  --orange-dark: #a8460c;
  --orange-soft: #fbeade;
  --orange-contrast: #ffffff;

  --border: #e4dacd;
  --border-strong: #d2c3b1;
  --shadow-sm: 0 1px 2px rgba(36, 28, 23, 0.04), 0 2px 8px rgba(36, 28, 23, 0.04);
  --shadow-md: 0 4px 12px rgba(36, 28, 23, 0.06), 0 12px 32px rgba(36, 28, 23, 0.08);
  --shadow-lg: 0 18px 48px rgba(36, 28, 23, 0.14);

  --logo-filter: invert(1) hue-rotate(180deg);
}