/*
 * Terrain & Traces — design tokens (thème jour « paper »)
 * Source : design system Terrain & Traces v1
 * https://claude.ai/code/artifact/298b3e39-3a0f-4ef2-8330-b1dba179a98a
 *
 * Charger AVANT styles.css. Les polices sont hébergées sur le site
 * (assets/fonts/fonts.css, chargé par <link> dans les layouts — voir CLAUDE.md).
 * Le thème nuit (« map room ») existe dans le design system mais n'est pas
 * activé sur le site pour l'instant.
 */

:root {
  /* ── Fonds ─────────────────────────────────────────────── */
  --paper:        #f0e9d8; /* fond de page — le papier de la carte du logo */
  --paper-raised: #f9f5ec; /* cartes, champs, offres */
  --sand:         #ebdcc1; /* bandes calmes : infos pratiques, FAQ */

  /* ── Filets ────────────────────────────────────────────── */
  --line:         #d6c9ab; /* filets et séparateurs (décoratif) */
  --line-strong:  #857d68; /* bordures de champs, bouton secondaire (≥ 3:1) */

  /* ── Texte ─────────────────────────────────────────────── */
  --ink:          #232927; /* titres, texte, fond du bouton principal */
  --ink-muted:    #565a52; /* légendes, métadonnées, aides (≥ 5:1) */
  --on-ink:       #f0e9d8; /* texte sur fond ink */

  /* ── Identité (couleurs du logo) ───────────────────────── */
  --sea:          #95bbcd; /* aplat uniquement : eau des cartes, illustrations */
  --coast:        #397296; /* traits de côte uniquement — jamais du texte */
  --channel:      #2f5f80; /* liens et anneau de focus (≥ 5:1) */
  --channel-soft: #d9e3e8; /* fond des notes d'information */
  --trace:        #a3352b; /* rouge « trace » : tracés, X, rail, surtitres, survol bouton */
  --trace-soft:   #f3dfd3; /* fond derrière un texte trace */
  --contour:      #998c6a; /* filets topographiques décoratifs — jamais du texte */

  /* ── Paysage & niveaux de preuve ───────────────────────── */
  --bocage:       #2e4a36; /* « établi », végétation des cartes */
  --bocage-soft:  #dce5d6;
  --on-bocage:    #f3efe4;
  --ochre:        #7a5a12; /* « hypothèse plausible », mises en garde */
  --ochre-soft:   #efe3c4;

  /* ── Sur fond encre (sections sombres, visionneuse) ───────
     Ajouts pour le site : valeurs reprises du thème nuit du design system
     ou dérivées de --ink, pour garder les contrastes sur fond sombre. */
  --trace-on-ink:  #e59068; /* surtitres et rail sur fond ink (≈ 6:1) */
  --muted-on-ink:  #c9c3b3; /* texte secondaire sur fond ink (≈ 8,4:1) */
  --line-on-ink:   #4a524e; /* filets sur fond ink */
  --scrim-strong:  #232927c7; /* voile de lisibilité sur photo (ink 78 %) */
  --scrim-soft:    #23292914; /* voile léger (ink 8 %) */
  --backdrop:      #232927d9; /* fond derrière les boîtes de dialogue */

  /* ── Alias ─────────────────────────────────────────────── */
  --link:  var(--channel);
  --focus: var(--channel);

  /* ── Typographie ───────────────────────────────────────── */
  --font-serif: Newsreader, "Iowan Old Style", Georgia, serif;
  --font-sans:  "Public Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* taille / interlignage / graisse */
  --type-display:     500 56px/60px var(--font-serif);  /* hero, une fois par page */
  --type-display-it:  italic 600 56px/60px var(--font-serif); /* le seul mot en accent */
  --type-h1:          500 40px/46px var(--font-serif);
  --type-h2:          500 28px/34px var(--font-serif);
  --type-h3:          600 21px/28px var(--font-serif);
  --type-lede:        400 21px/32px var(--font-serif);
  --type-reading:     400 19px/30px var(--font-serif);  /* texte long, max 68ch */
  --type-body:        400 17px/28px var(--font-sans);
  --type-body-sm:     400 15px/24px var(--font-sans);
  --type-label:       600 13px/18px var(--font-sans);   /* + uppercase, tracking 0.08em */
  --type-button:      600 16px/20px var(--font-sans);
  --type-archive:     400 13px/20px var(--font-mono);   /* références, dates, coordonnées */

  --tracking-display: -0.015em;
  --tracking-h1:      -0.01em;
  --tracking-label:   0.08em;
  --tracking-archive: 0.02em;

  /* ── Espacement (base 4px) ─────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;  /* gouttière mobile */
  --space-6:  24px;  /* padding de carte */
  --space-8:  32px;  /* gouttière bureau */
  --space-12: 48px;
  --space-16: 64px;  /* padding de section, mobile */
  --space-24: 96px;  /* padding de section, bureau */

  /* ── Rayons : presque droits ───────────────────────────── */
  --radius-none: 0;    /* photos, cartes géographiques, scans */
  --radius-sm:   2px;  /* tags, champs, cases */
  --radius-md:   4px;  /* boutons, cartes, notes */

  /* ── Ombres : des bordures, pas des ombres ─────────────── */
  --shadow-float: 0 2px 4px #1e232014, 0 10px 24px -6px #1e232026; /* menus, barre flottante */
  --focus-ring:   0 0 0 2px var(--paper), 0 0 0 4px var(--channel);

  /* ── Traits ────────────────────────────────────────────── */
  --stroke-hairline: 1px;
  --stroke-trace:    2px;  /* tiretés 6px 4px quand le trajet est reconstitué */
  --dash-trace:      6px 4px;

  /* ── Mesures ───────────────────────────────────────────── */
  --measure-reading: 68ch;
  --measure-page:    1200px;

  /* ── Mouvement ─────────────────────────────────────────── */
  --ease-out: cubic-bezier(.2, .7, .3, 1);
  --duration: 180ms;
}

@media (max-width: 640px) {
  :root {
    --type-display:    500 40px/44px var(--font-serif);
    --type-display-it: italic 600 40px/44px var(--font-serif);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration: 0ms; }
}