/* tokens.css — fondations Lynewar (direction 3a, editorial creme).
   Jamais de valeur en dur ailleurs : tout part d'un token.
   Palette monochrome encre sur papier creme, une seule surface sombre. */

:root {
  /* Surfaces */
  --paper: #FAF8F5;          /* fond page, creme tres clair */
  --paper-2: #F1EDE6;        /* sections et surfaces creusees */
  --paper-3: #FFFFFF;        /* surfaces elevees ponctuelles */
  --ink: #1B1B1B;            /* texte principal, surface sombre */
  --ink-inv: #FAF8F5;        /* texte pose sur l'encre */

  /* Signal Lynewar, extrait du bleu du ciel de la photo hero */
  --signal: #167A9B;
  --signal-hover: color-mix(in srgb, var(--signal) 82%, var(--ink));

  /* Encre attenuee (sur papier) */
  --muted: rgba(27, 27, 27, .72);   /* paragraphes */
  --muted-2: rgba(27, 27, 27, .55); /* meta, legendes */
  --dim: rgba(27, 27, 27, .5);      /* sur-titres, labels */
  --hair: rgba(27, 27, 27, .08);    /* filets discrets */
  --hair-2: rgba(27, 27, 27, .12);  /* filets marques */
  --hair-3: rgba(27, 27, 27, .4);   /* soulignes de liens secondaires */

  /* Encre attenuee (sur surface sombre) */
  --muted-inv: rgba(250, 248, 245, .7);
  --dim-inv: rgba(250, 248, 245, .55);
  --hair-inv: rgba(250, 248, 245, .2);
  --hair-inv-2: rgba(250, 248, 245, .3);

  /* Typographie */
  /* Systeme typographique unifie (inspiration brittanybravo.com) :
     Bricolage Grotesque en display gras, DM Sans en texte. */
  --font-display: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif; /* titres, wordmark */
  --font-text: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* texte, nav, labels */
  --font-grotesk: var(--font-text);   /* alias */
  --font-fat: var(--font-display);    /* alias */

  --text-display: clamp(44px, 8vw, 70px);   /* hero */
  --text-h1: clamp(38px, 6vw, 52px);        /* titres de section forts */
  --text-h2: clamp(30px, 4.4vw, 44px);
  --text-h3: clamp(24px, 3.2vw, 32px);
  --text-lead: clamp(18px, 2.2vw, 22px);    /* chapo italique */
  --text-body: 15px;
  --text-sm: 14px;
  --text-label: 11px;                       /* sur-titres mono-espaces */
  --text-button: 20px;
  --text-brand-mobile: 24px;

  --lh-tight: 1;
  --lh-snug: 1.15;
  --lh-body: 1.8;
  --track-label: .28em;                     /* sur-titres */
  --track-kbd: .16em;                       /* libelles boutons */

  /* Espace — echelle 4px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 14px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 44px;
  --space-8: 56px;
  --space-9: 70px;
  --space-10: 90px;

  --section-y: clamp(64px, 9vw, 90px);      /* rythme vertical des sections */
  --max-w: 1280px;                          /* largeur de la maquette */
  --max-w-text: 62ch;                       /* mesure de lecture */
  --gutter: clamp(20px, 5vw, 56px);         /* marge laterale fluide */
  --side-mobile-height: 72px;                /* hauteur du chrome mobile */
  --side-mobile-row: 52px;
  --tap-target: 48px;
  --stroke: 1px;
  --side-toggle-offset: 5px;
  --side-toggle-offset-negative: -5px;

  /* Rayons */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 16px;
  --r-pill: 100px;

  /* Ombres */
  --shadow-hero: 0 20px 50px rgba(0, 0, 0, .18);
  --shadow-card: 0 24px 70px color-mix(in srgb, var(--signal) 10%, transparent);
  --shadow-button: 0 10px 24px color-mix(in srgb, var(--signal) 18%, transparent);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--signal) 10%, transparent);

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: 300ms;
  --dur-intro: 900ms;
  --dur-marquee: 32s;
  --paper-grain-opacity: .035;
  --z-header: 20;

}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 96px;   /* les ancres ne passent pas sous le menu flottant */
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

figure { margin: 0; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-weight: 600; }   /* Bricolage : les titres ont du corps */

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}