/* ==========================================================================
   TANGUY LE BARS — SYSTÈME DESIGN
   tokens.css · la source unique de vérité (couleur, type, espace, mouvement)
   ========================================================================== */

:root {
  /* ---------- COULEUR : primitives ------------------------------------- */

  /* Forge — les noirs. Base sombre du site, ton légèrement bleuté. */
  --c-forge-950: #07080A;
  --c-forge-900: #0B0D10;
  --c-forge-800: #131619;
  --c-forge-700: #1C2025;
  --c-forge-600: #2A2F35;

  /* Acier — les gris. Échelle neutre, calquée sur le métal brossé. */
  --c-steel-600: #3A4048;
  --c-steel-500: #4E545C;
  --c-steel-400: #767D86;
  --c-steel-300: #9CA3AC;
  --c-steel-200: #C2C7CD;
  --c-steel-100: #E2E5E8;

  /* Papier — les clairs. Blanc chaud, jamais pur : le blanc pur crie. */
  --c-paper:     #F7F5F2;
  --c-paper-dim: #EEEAE4;
  --c-paper-low: #E3DED6;

  /* Abysse — accent primaire. Relevé sur le mur du « Banc de raies ». */
  --c-abyss-900: #0E1A26;
  --c-abyss-800: #142335;
  --c-abyss-700: #1B2E43;
  --c-abyss-600: #293A55;
  --c-abyss-400: #46608A;

  /* Braise — accent signal. Acier à 900 °C. Moins de 2 % de la surface. */
  --c-ember:      #C4552A;
  --c-ember-soft: #E27B4B;

  /* Patine — filets, dégradés, reflets. Jamais du texte. */
  --c-patina: #9A8C79;

  /* ---------- COULEUR : jetons sémantiques ----------------------------- */
  /* Par défaut : surface Forge. Redéfinis par .surface--* plus bas.       */
  --bg:          var(--c-forge-900);
  --bg-elev:     var(--c-forge-800);
  --bg-sunken:   var(--c-forge-950);
  --fg:          var(--c-paper);
  --fg-muted:    var(--c-steel-300);
  --fg-subtle:   var(--c-steel-400);
  --line:        rgba(247, 245, 242, .12);
  --line-strong: rgba(247, 245, 242, .26);
  --accent:      var(--c-steel-100);
  --signal:      var(--c-ember-soft);
  --overlay:     rgba(7, 8, 10, .72);
  --selection:   rgba(196, 85, 42, .30);

  /* ---------- TYPOGRAPHIE ---------------------------------------------- */
  --font-display: 'Instrument Serif', 'Iowan Old Style', 'Palatino', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* Échelle fluide — ratio ~1.28, bornée mobile → desktop */
  --fs-hero:  clamp(3.4rem, 11.5vw, 11rem);
  --fs-d1:    clamp(2.75rem, 6.4vw, 5.75rem);
  --fs-d2:    clamp(2.1rem, 4.2vw, 3.6rem);
  --fs-d3:    clamp(1.6rem, 2.6vw, 2.3rem);
  --fs-lead:  clamp(1.125rem, 1.5vw, 1.4rem);
  --fs-body:  1.0125rem;
  --fs-sm:    0.9rem;
  --fs-xs:    0.8125rem;
  --fs-micro: 0.6875rem;

  --lh-tight: 0.94;
  --lh-snug:  1.1;
  --lh-base:  1.62;
  --lh-lead:  1.5;

  --tr-hero:  -0.035em;   /* tracking */
  --tr-tight: -0.02em;
  --tr-base:  -0.01em;
  --tr-wide:  0.08em;
  --tr-caps:  0.22em;

  /* ---------- ESPACE ---------------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px; --s-11: 176px; --s-12: 240px;

  --section-y: clamp(88px, 13vw, 200px);
  --gutter:    clamp(20px, 4.6vw, 72px);
  --container: 1360px;
  --measure:   62ch;

  /* ---------- FORME ----------------------------------------------------- */
  /* Le métal se coupe, il ne s'arrondit pas. Rayons quasi nuls. */
  --r-0: 0px;  --r-1: 2px;  --r-2: 4px;  --r-3: 8px;  --r-full: 999px;
  --border: 1px;

  /* ---------- OMBRE / PROFONDEUR ---------------------------------------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,.28);
  --shadow-2: 0 8px 24px -8px rgba(0,0,0,.45);
  --shadow-3: 0 32px 72px -24px rgba(0,0,0,.62);
  --glow-ember: 0 0 0 1px rgba(196,85,42,.45), 0 8px 32px -12px rgba(196,85,42,.5);

  /* ---------- MOUVEMENT -------------------------------------------------- */
  --e-out:    cubic-bezier(.16, 1, .3, 1);      /* sortie franche, arrivée douce */
  --e-in-out: cubic-bezier(.65, 0, .35, 1);
  --e-metal:  cubic-bezier(.22, .61, .36, 1);   /* masse : démarre lourd */

  --d-1: 160ms;   /* micro-état : survol, focus  */
  --d-2: 320ms;   /* transition d'élément        */
  --d-3: 620ms;   /* apparition au scroll        */
  --d-4: 1100ms;  /* mouvement d'image, parallaxe */

  /* ---------- PROFONDEUR Z ----------------------------------------------- */
  --z-base: 1; --z-sticky: 50; --z-drawer: 200; --z-header: 220; --z-modal: 300;
}

/* ==========================================================================
   SURFACES — un bloc change de fond, tous ses composants s'y adaptent.
   ========================================================================== */

.surface--forge {
  --bg: var(--c-forge-900);
  --bg-elev: var(--c-forge-800);
  --bg-sunken: var(--c-forge-950);
  --fg: var(--c-paper);
  --fg-muted: var(--c-steel-300);
  --fg-subtle: var(--c-steel-400);
  --line: rgba(247,245,242,.12);
  --line-strong: rgba(247,245,242,.26);
  --accent: var(--c-steel-100);
  --signal: var(--c-ember-soft);
}

.surface--paper {
  --bg: var(--c-paper);
  --bg-elev: #FFFFFF;
  --bg-sunken: var(--c-paper-dim);
  --fg: var(--c-forge-900);
  --fg-muted: var(--c-steel-500);
  --fg-subtle: var(--c-steel-400);
  --line: rgba(11,13,16,.14);
  --line-strong: rgba(11,13,16,.3);
  --accent: var(--c-forge-900);
  --signal: var(--c-ember);
}

.surface--abyss {
  --bg: var(--c-abyss-800);
  --bg-elev: var(--c-abyss-700);
  --bg-sunken: var(--c-abyss-900);
  --fg: var(--c-paper);
  --fg-muted: #A9BAD0;
  --fg-subtle: #7A8CA6;
  --line: rgba(247,245,242,.14);
  --line-strong: rgba(247,245,242,.3);
  --accent: var(--c-paper);
  --signal: var(--c-ember-soft);
}

.surface--forge, .surface--paper, .surface--abyss {
  background-color: var(--bg);
  color: var(--fg);
}