/*
  Agency design system: tokens.
  Every value decided on 15.10.2026, step by step (see decisions.md); colour updated to « Surface » on 18.10.2026.
  Use the tokens, never the raw values, so one change updates everything.
*/

:root {
  /* ---------- Colour (step 2, « Surface » since 18.10) ---------- */
  /* Grounds are white and black. Nuit is the brand: text on white, cards on black, the main button. */
  --c-white: #FFFFFF;        /* light ground, print paper, form fields */
  --c-black: #0B1410;        /* dark ground: black with a hint of Nuit (OKLCH 0.18 / 0.016 / 166) */
  --c-nuit: #082D20;         /* signature: text on white, surfaces (cards on black, main button) */
  --c-paper: #F1F8F4;        /* card on white */
  --c-menthe: #8AD7B6;       /* accent on black and on Nuit (lines, details); never text on white */

  --c-nuit-hi: #12442F;      /* hover on Nuit buttons */
  --c-menthe-hi: #A6E3C9;    /* hover on Menthe buttons */
  --c-tone-p: #E2EEE8;       /* card on paper (ton sur ton) */
  --c-tone-n: #0E3A2A;       /* card on Nuit (ton sur ton) */
  --c-tone-k: #16221D;       /* quiet block on black: hover on outline buttons */

  --c-muted-p: #53615B;      /* secondary text on white 6.5:1, on paper 6.0:1 */
  --c-line-p: #CFDBD5;       /* lines and neutral tags on white and paper */
  --c-muted-k: #9AA9A2;      /* secondary text on black, 7.6:1 */
  --c-line-k: #23312B;       /* lines and neutral tags on black */
  --c-muted-n: #A6BEB3;      /* secondary text on Nuit, 7.6:1 */
  --c-line-n: #2B4339;       /* lines and neutral tags on Nuit */

  --c-bad: #B3261E;          /* « à corriger », errors; 6.5:1 on white */
  --c-bad-tint: #F8E3E1;

  /* ---------- Type (steps 1 and 3) ---------- */
  --f-display: "Anybody", "Arial Narrow", system-ui, sans-serif;
  --f-text: "Funnel Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Fluid sizes, 360 px → 1440 px. Ratio 1.2 → 1.333 ("Mixte"). */
  --t-small: clamp(0.833rem, 0.83rem + 0.016vw, 0.844rem);   /* 13.3 → 13.5 px */
  --t-body:  clamp(1rem, 0.958rem + 0.185vw, 1.125rem);      /* 16 → 18 px */
  --t-lead:  clamp(1.2rem, 1.1rem + 0.444vw, 1.5rem);        /* 19.2 → 24 px */
  --t-h3:    clamp(1.44rem, 1.254rem + 0.828vw, 2rem);       /* 23 → 32 px */
  --t-h2:    clamp(1.728rem, 1.416rem + 1.388vw, 2.665rem);  /* 27.6 → 42.6 px */
  --t-h1:    clamp(2.074rem, 1.581rem + 2.19vw, 3.552rem);   /* 33.2 → 56.8 px */
  /* Poster size: the page's main headline only, once per page. Ratio 1.25 → 1.5. */
  --t-poster: clamp(3.052rem, 1.221rem + 8.135vw, 8.543rem); /* 48.8 → 136.7 px */

  /* Anybody settings: restrained at rest (it turns sporty-retro at its extremes). */
  --fv-poster: "wdth" 78, "wght" 850;
  --fv-heading: "wdth" 90, "wght" 780;
  --fv-sub: "wdth" 100, "wght" 700;

  --lh-tight: 1;
  --lh-heading: 1.08;
  --lh-text: 1.6;
  --measure: 62ch;           /* max line length for running text */

  /* ---------- Space and shape (step 3) ---------- */
  --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;
  --space-section: clamp(4rem, 2.667rem + 5.926vw, 8rem);   /* 64 → 128 px between sections */
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --page-max: 72rem;

  --r-1: 4px;                /* fields */
  --r-2: 8px;                /* buttons, tags, small blocks */
  --r-3: 14px;               /* cards, image frames */
  --r-pill: 999px;

  --tap: 48px;               /* minimum height of anything you touch */

  /* Shadows only for things that float above the page (step 7). */
  --shadow-float: 0 10px 28px rgba(8, 45, 32, .14), 0 1px 3px rgba(8, 45, 32, .08);

  /* ---------- Motion, "Duo" (step 4) ---------- */
  /* Net: what people touch (buttons, lists, feedback). GSAP: power3.out */
  --ease-ui: cubic-bezier(.25, 1, .5, 1);
  --dur-ui-1: .25s;
  --dur-ui-2: .45s;
  --dur-ui-3: .7s;
  --stagger-ui: .03s;
  --press-scale: .97;
  /* Cinéma: big moments (headlines, blocks, the elastic word). GSAP: expo.out / expo.inOut */
  --ease-big: cubic-bezier(.16, 1, .3, 1);
  --ease-big-inout: cubic-bezier(.87, 0, .13, 1);
  --dur-big-1: .8s;
  --dur-big-2: 1.4s;
  --dur-big-3: 2.2s;
  --stagger-big: .1s;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-ui-1: .01s; --dur-ui-2: .01s; --dur-ui-3: .01s;
    --dur-big-1: .2s; --dur-big-2: .2s; --dur-big-3: .2s;
    --stagger-ui: 0s; --stagger-big: 0s;
    --press-scale: 1;
  }
}