/* =====================================================================
   TOKENS — vitrine ultrafin.fr (M53)
   UNIQUE SOURCE DE VÉRITÉ couleurs / typo / espacements / rayons.
   ⚠ SEUL fichier où une valeur brute (#hex, taille de police) a le droit
   d'exister. Partout ailleurs : var(--...) exclusivement (grep contradicteur).
   Valeurs : SPEC_VITRINE_ULTRAFIN.md §1 (couleurs) et §2 (système).
   ===================================================================== */

:root {
  color-scheme: light only; /* AUCUN dark mode auto (spec §1) */

  /* ---- Couleurs (spec §1, table de tokens) ---- */
  --bg-page: #FAFAF7;            /* jamais #FFF pur en fond de page */
  --surface-2: #F1F0EB;          /* sections alternées, bandeau */
  --surface-card: #FFFFFF;       /* carte / capture */
  --border-card: #E5E4DE;        /* bordure 1px des cartes/captures */
  --bg-dark: #0A0A0F;            /* hero + bloc IA */
  --bg-footer: #14141B;          /* footer sombre + bande confiance fine */

  --text-1: #16161D;             /* texte sur clair */
  --text-2: #5A5A66;             /* texte secondaire sur clair */
  --text-1-dark: #F5F4EF;        /* texte sur sombre */
  --text-2-dark: #A5A4AE;        /* secondaire sur sombre (8,01:1) — #9CA3AF INTERDIT */

  --accent: #7C3AED;             /* icônes, coches, bordures — à plat */
  --link-on-light: #6D28D9;      /* liens sur clair (6,79:1) */
  --link-hover-on-light: #5B21B6;
  --link-on-dark: #A78BFA;       /* liens sur SOMBRE uniquement */

  --cta-grad-from: #7C3AED;
  --cta-grad-to: #C42D8C;        /* fin du dégradé CTA (blanc dessus 5,12:1) */
  --cta-grad: linear-gradient(90deg, #7C3AED, #C42D8C);
  --cta-text: #FFFFFF;

  --green-on-dark: #22C55E;
  --green-on-light: #166534;     /* vert TEXTE sur clair (#15803D échoue en texte) */
  --green-badge-bg: #DCFCE7;
  --green-badge-text: #166534;
  --green-badge-dot: #15803D;

  --focus-ring-light: #7C3AED;
  --focus-ring-dark: #A78BFA;
  --focus-ring: var(--focus-ring-light); /* redéfini dans les contextes sombres */
  --link: var(--link-on-light);          /* idem */

  --card-hover-border: #C9C6BC;
  --card-float-bg: rgba(255, 255, 255, 0.94);

  /* ---- Ombres (teintes verrouillées ici, jamais ailleurs) ---- */
  --shadow-cta: 0 8px 24px rgba(124, 58, 237, 0.28);
  --shadow-capture: 0 24px 64px -16px rgba(16, 16, 29, 0.28);
  --shadow-float: 0 12px 32px -8px rgba(16, 16, 29, 0.16);
  --shadow-soft: 0 4px 16px -4px rgba(16, 16, 29, 0.10);

  /* ---- Typo (spec §2) ----
     Fonte : pile SYSTÈME provisoire. TODO_ASSET Patron : woff2 subset latin
     licenciée → déclarer ici le @font-face (font-display: swap) + preload
     dans head.html, puis remplacer le premier nom de la pile. */
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --fs-h1: 56px;   --lh-h1: 1.05; --ls-h1: -0.02em; --fw-h1: 700;
  --fs-h2: 40px;   --lh-h2: 1.15;                    --fw-h2: 700;
  --fs-h3: 24px;   --lh-h3: 1.3;                     --fw-h3: 600;
  --fs-body: 17px; --lh-body: 1.6;
  --fs-lead: 20px; --lh-lead: 1.5;
  --fs-small: 14px;
  --fs-eyebrow: 13px; --fw-eyebrow: 600; --ls-eyebrow: 0.08em;
  --fw-cta: 600; --fs-cta: 17px; /* libellé CTA 17px/600 */

  /* ---- Grille & espacements (spec §2) ---- */
  --container-max: 1200px;
  --gutter: 24px;
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-6: 24px;
  --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px; --sp-30: 120px;
  --sp-section: 120px;         /* 120 desktop / 96 tablette / 72 mobile */
  --sp-section-dark-extra: 16px;

  /* ---- Rayons ---- */
  --r-btn: 10px;
  --r-card: 12px;
  --r-capture: 16px;

  /* ---- Nav / capture à cheval ---- */
  --nav-h: 72px;               /* 60 mobile */
  --capture-overlap: 140px;    /* 72 en 768-1023, 0 en <768 */

  /* ---- Durées ---- */
  --dur: 150ms;                /* transitions, ease-out */
  --reveal-dur: 300ms;         /* apparition au scroll */
}

/* Tablette (768–1023) */
@media (max-width: 1023px) {
  :root {
    --sp-section: 96px;
    --capture-overlap: 72px;
  }
}

/* Mobile (<768) */
@media (max-width: 767px) {
  :root {
    --sp-section: 72px;
    --capture-overlap: 0px;
    --nav-h: 60px;
    --gutter: 20px;
  }
}

/* Petits mobiles (≤480) — typo réduite, body jamais sous 16 */
@media (max-width: 480px) {
  :root {
    --fs-h1: 34px;
    --fs-h2: 28px;
    --fs-h3: 20px;
    --fs-body: 16px;
    --fs-small: 13px;
  }
}

/* Accessibilité : tout à 0ms (spec §2 / §3ter.5) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0ms;
    --reveal-dur: 0ms;
  }
}