/* =========================
   TOKENS (variables globales)
========================= */
:root{
  /* Typography */
  --font-heading: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:   1.15;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relax:   1.65;
  --lh-xl:      2;

  /* Radius */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Gaps */
  --gap-xs:   3px;
  --gap-sm:   6px;
  --gap-md:   8px;
  --gap-lg:  10px;
  --gap-xl:  15px;
  --gap-2xl: 20px;
  --gap-3xl: 25px;

  /* Padding tokens */
  --pad-layout: 20px;
  --pad-layout-inv: 20px 0 20px 0;
  --pad-form:   25px;

  /* Font scale (fluid) */
  --fs-100: clamp(0.75rem, 0.68rem + 0.35vw, 0.875rem);
  --fs-200: clamp(0.875rem, 0.80rem + 0.35vw, 1rem);
  --fs-300: clamp(1rem, 0.92rem + 0.50vw, 1.125rem);
  --fs-400: clamp(1.125rem, 1.02rem + 0.55vw, 1.25rem);
  --fs-500: clamp(1.25rem, 1.10rem + 0.80vw, 1.5rem);
  --fs-600: clamp(1.5rem, 1.25rem + 1.10vw, 1.875rem);
  --fs-700: clamp(1.75rem, 1.40rem + 1.40vw, 2.25rem);
  --fs-800: clamp(2rem, 1.55rem + 1.95vw, 2.75rem);
  --fs-900: clamp(2.5rem, 1.80rem + 2.90vw, 3.5rem);
  --fs-950: clamp(3rem, 2.00rem + 4.00vw, 4rem);

 

  /* Transitions */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  --ease-out:     cubic-bezier(.2,.8,.2,1);
  --ease-in:      cubic-bezier(.4,0,1,1);
  --ease-in-out:  cubic-bezier(.4,0,.2,1);

  --trans-color:     color var(--dur-slow) var(--ease-out);
  --trans-bg:        background-color var(--dur-base) var(--ease-out);
  --trans-opacity:   opacity var(--dur-fast) var(--ease-out);
  --trans-transform: transform var(--dur-base) var(--ease-out);
  --trans-shadow:    box-shadow var(--dur-base) var(--ease-out);

  /* Layout tokens */
  --header-h:     80px;

  --container-px: 20px;
  --container-min: 540px;
  --container-max: 1280px;

  --container-mw: clamp(
    var(--container-min),
    calc(100vw - 2 * var(--container-px)),
    var(--container-max)
  );

  --container-header-max: 100%;
  --container-footer-max: 100%;

  /* Inputs */
  --input-h:            46px;
  --input-radius:        8px;
  --input-px:           15px;
  --input-mb:           15px;

  --input-bg:           var(--white);
  --input-fg:           var(--color-text);
  --input-border:       var(--color-border);
  --input-placeholder:  var(--blue-700);
  --input-focus-border: var(--color-primary);
  --input-focus-ring:   var(--focus-ring);
  --input-disabled-bg:  var(--smoke-50);

  --input-cb-h:         24px;
  --input-cb-w:         24px;
  --input-rb-h:         24px;
  --input-rb-w:         24px;

  /* Spacing scale (utilitaire) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
}

/* Breakpoints centralisés (si tu as PostCSS custom-media) */
@custom-media --bp-mobile (max-width: 640px);
@custom-media --bp-tablet (min-width: 641px) and (max-width: 1024px);
@custom-media --bp-desktop (min-width: 1025px);

/* Responsive tokens */
@media (max-width: 768px){
  :root{ --header-h: 64px; }
}