/* ============================================
   TOKENS — Kolorlab
   Variables globales (couleurs, espaces, typo, grille)
   ============================================ */

:root {
  /* --- Couleurs structurelles --- */
  --white: #ffffff;
  --black: #000000;
  --gray-light: #efefef;
  --gray-mid: #c9c9c9;
  --gray-dark: #6b6b6b;
  --gray-stroke: #d8d8d8;

  /* Accent dynamique (changé par page nuancier) */
  --color-accent: #000000;

  /* --- Typographie --- */
  --font-base: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  /* Tailles (validées par Pablo) */
  --fs-h1: clamp(2.5rem, 6vw, 4rem);     /* 64pt */
  --fs-h2: clamp(1.75rem, 3.5vw, 2rem);  /* 32pt */
  --fs-h3: clamp(1.5rem, 3vw, 2rem);     /* 32pt */
  --fs-h4: 1.25rem;                       /* 20pt */
  --fs-body: 1rem;                        /* 16pt */
  --fs-date: 0.875rem;                    /* 14pt */
  --fs-small: 0.8125rem;

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Grille --- */
  --max-width: 1720px;
  --columns: 12;
  --gutter: 20px;
  --margin-side: 80px;
  --margin-mobile: 24px;

  /* --- Espacement (multiples de 8) --- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-section: 120px;
  --space-section-lg: 160px;

  /* --- Divers --- */
  --stroke: 1px solid var(--black);
  --stroke-light: 1px solid var(--gray-stroke);
  --radius: 0px;
  --radius-cta: 2px;
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --header-height: 80px;
  --z-header: 1000;
  --z-dropdown: 1100;
  --z-overlay: 1200;
}

@media (max-width: 768px) {
  :root {
    --margin-side: var(--margin-mobile);
    --space-section: 72px;
    --space-section-lg: 96px;
  }
}