/* ==========================================================================
   tokens.css — Design tokens du style guide (inspiration index.studio)
   Palette monochrome · Schibsted Grotesk · motion 0.3s–1s
   Usage : importer en premier :  <link rel="stylesheet" href="tokens.css">
   Doc : docs/STYLEGUIDE.md
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------
     1. Couleurs — monochrome strict (§2)
     ------------------------------------------------------------------ */
  --color-bg: #fff;                                /* fond global */
  --color-bg-inverse: #000;                        /* menu overlay, vue list, progress, launcher */
  --color-text: #1a1a1a;                           /* texte principal "loud" */
  --color-text-strong: #000;                       /* descriptions, texte le plus contrasté */
  --color-text-muted: #767676;                     /* a11y : contraste AA pour texte < 18px */
  --color-text-muted-display: #9b9b9b;             /* grand texte / décor uniquement (2.8:1) */
  --color-text-light: #bebebe;                     /* texte tertiaire, placeholders */
  --color-text-inverse: #fff;                      /* texte sur fond noir */
  --color-surface: #efefef;                        /* surfaces neutres */
  --color-border: #e0e0e0;                         /* bordures cartes */
  --color-border-soft: #ccc;                       /* dividers légers */
  --color-highlight: #ff9;                         /* marque de sélection (rare) */
  --color-overlay: hsl(0 0% 100% / .4);            /* catégories sur fond noir */
  --color-overlay-10: hsl(0 0% 100% / .1);         /* bordures internes sur fond noir */
  --color-hover: hsl(0 0% 8% / .6);                /* hover texte sur fond clair */
  --color-shadow: rgb(0 0 0 / 10%);                /* ombres douces */

  /* ------------------------------------------------------------------
     2. Typographie — Schibsted Grotesk (§3)
     Correspondance PostGrotesk : Light≈400(Book) · Medium≈500 · Bold≈700
     ------------------------------------------------------------------ */
  --font-sans: "Schibsted Grotesk", "Inter Tight", system-ui, sans-serif;

  --font-weight-light: 400;
  --font-weight-book: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Échelle — palier le plus large (desktop) */
  --text-display: 3.75rem;          /* 60px — .h1 */
  --line-display: 1.2;
  --text-h2: 2.5rem;                /* 40px */
  --line-h2: 1;
  --text-h3: 1.875rem;              /* 30px */
  --line-h3: 1.3333;
  --text-intro: 1.5rem;             /* 24px — intro grille travaux */
  --line-intro: 1.5;
  --text-body: 1.25rem;             /* 20px */
  --line-body: 1.6;
  --text-h4: 1.25rem;               /* 20px — titres de projet */
  --text-list: 1rem;                /* 16px — vue list */
  --text-h5: 0.875rem;              /* 14px — catégories */
  --line-h5: 1.7142857143;          /* 24/14 */
  --text-ui: 0.875rem;              /* 14px — breadcrumb, boutons, nav */
  --text-caption: 0.75rem;          /* 12px — métadonnées */
  --text-micro: 0.625rem;           /* 10px — micro-labels */

  /* ------------------------------------------------------------------
     3. Layout (§4)
     Breakpoints : un seul seuil fonctionnel — 767px (≤767 mobile, >767 desktop)
     ------------------------------------------------------------------ */
  --container-max: 1800px;          /* .gwrapper max-width */
  --container-width: 70%;           /* .gwrapper width */
  --container-width-mobile: 88%;
  --gutter: 22.5px;                 /* demi-gouttière (colonne = 45px entre items) */
  --margin-side: 12vw;              /* marges latérales pages de contenu */
  --beat-top: 40vh;                 /* marge haute des sections (intro travaux) */
  --beat-bottom: 18vh;

  /* ------------------------------------------------------------------
     4. Rythme — grille travaux (§5)
     ------------------------------------------------------------------ */
  --rhythm-item: 205px;             /* marge entre items de grille desktop */
  --rhythm-item-mobile: 105px;      /* marge mobile */
  --visual-gap: 22px;               /* écart image → titre */
  --row-pad: 15px;                  /* padding rangées vue list */
  --list-col: 45%;                  /* largeur colonne titre/catégorie */

  /* ------------------------------------------------------------------
     5. Motion (§6)
     ------------------------------------------------------------------ */
  --ease-primary: cubic-bezier(.215, .61, .355, 1);    /* standard : hovers, fades, reveals */
  --ease-secondary: cubic-bezier(.165, .84, .44, 1);   /* boutons, shape du menu */
  --ease-inout: cubic-bezier(.77, 0, .175, 1);         /* transitions de vue 1s */
  --ease-inout-alt: cubic-bezier(.645, .045, .355, 1); /* inout secondaire */

  --duration-fast: 300ms;           /* hover texte, underline list */
  --duration-base: 400ms;           /* color, petits transforms */
  --duration-slow: 600ms;           /* cross-fade image hover */
  --duration-reveal: 900ms;         /* entrées translateY(30px) */
  --duration-view: 1000ms;          /* slide de vue, launcher */

  --reveal-offset: 30px;            /* translateY initial des reveals */
  --reveal-delay: 200ms;            /* décalage de cascade */

  /* ------------------------------------------------------------------
     6. Composants clés (§7)
     ------------------------------------------------------------------ */
  --progress-height: 4px;           /* barre de progression */
  --preview-width: 15%;             /* preview vue list suivant le curseur */
  --nav-overlay-size: 2.25rem;      /* 36px — liens nav overlay */

  /* ------------------------------------------------------------------
     7. Z-index (§9) — une couche par intention
     ------------------------------------------------------------------ */
  --z-content: 1;
  --z-transition: 55;               /* overlay de transition de vue */
  --z-progress: 65;                 /* barre de progression */
  --z-landing: 90;                  /* nav overlay */
  --z-launcher: 100;                /* écran d'intro */
}

/* --------------------------------------------------------------------
   Overrides mobiles — breakpoint 767px
   -------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --container-width: var(--container-width-mobile);
    --text-display: 2.1875rem;      /* 35px */
    --line-display: 1.25;
    --text-h2: 1.625rem;            /* 26px */
    --text-h3: 1.375rem;            /* 22px */
    --text-intro: 1.125rem;         /* 18px */
    --text-body: 1rem;              /* 16px */
    --text-h4: 1.125rem;            /* 18px */
    --text-list: 0.875rem;          /* 14px */
    --text-h5: 0.8125rem;           /* 13px */
    --beat-top: 25vh;
    --beat-bottom: 0;
    --rhythm-item: var(--rhythm-item-mobile);
    --margin-side: 7.5vw;
  }
}

/* --------------------------------------------------------------------
   Mouvement réduit : couper transforms/keyframes, garder les opacités
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
    --duration-reveal: 1ms;
    --duration-view: 1ms;
    --reveal-delay: 0ms;
  }
}