/* ============================================================
   tokens.css — Variables centrales du design system
   Modifier les couleurs, polices et espacements ici.
   ============================================================ */

:root {
  /* —— Palette ————————————————————————————————————— */
  --c-sable: #F5EDE0;            /* fond principal — sable chaud */
  --c-sable-clair: #FBF6EE;      /* sable plus clair pour les blocs */
  --c-coquillage: #FFFBF5;       /* presque blanc — cards */
  --c-ocean: #1E5F74;            /* bleu profond — titres, header */
  --c-ocean-fonce: #143E4D;      /* bleu plus foncé — hover */
  --c-mer-claire: #4A9EB7;       /* bleu clair — liens, accents */
  --c-coucher: #E8825D;          /* orange coucher de soleil — CTA */
  --c-coucher-fonce: #D26B47;    /* orange foncé — hover CTA */
  --c-bois: #8B7355;             /* bois flotté — séparateurs */
  --c-encre: #2A2522;            /* texte principal */
  --c-encre-doux: #4A4540;       /* texte secondaire */
  --c-mute: #8B857F;             /* texte tertiaire / labels */
  --c-success: #5C9E6E;          /* "ouvert" */
  --c-error: #C2563E;            /* "fermé" */

  /* —— Typographie ——————————————————————————————————— */
  --ff-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --ff-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ff-handwritten: "Caveat", "Brush Script MT", cursive;

  /* —— Accent rouge "carte papier" (utilisé sur les pages de carte complète) —— */
  --c-rouge-carte: #C2563E;
  --c-rouge-carte-fonce: #A33F2A;

  --fs-xs: 0.8125rem;    /* 13px */
  --fs-sm: 0.9375rem;    /* 15px */
  --fs-base: 1rem;       /* 16px */
  --fs-md: 1.125rem;     /* 18px */
  --fs-lg: 1.375rem;     /* 22px */
  --fs-xl: 1.75rem;      /* 28px */
  --fs-2xl: 2.25rem;     /* 36px */
  --fs-3xl: 3rem;        /* 48px */
  --fs-4xl: clamp(2.5rem, 6vw + 1rem, 5rem);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

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

  /* —— Espacement ———————————————————————————————————— */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* —— Conteneurs ———————————————————————————————————— */
  --container-narrow: 720px;
  --container-base: 1080px;
  --container-wide: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* —— Bordures & rayons ——————————————————————————— */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --border: 1px solid rgba(42, 37, 34, 0.08);
  --border-strong: 1px solid rgba(42, 37, 34, 0.18);

  /* —— Ombres ————————————————————————————————————— */
  --shadow-sm: 0 1px 2px rgba(20, 62, 77, 0.06), 0 1px 3px rgba(20, 62, 77, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 62, 77, 0.08), 0 2px 4px rgba(20, 62, 77, 0.04);
  --shadow-lg: 0 12px 32px rgba(20, 62, 77, 0.12), 0 4px 8px rgba(20, 62, 77, 0.06);
  --shadow-cta: 0 8px 24px rgba(232, 130, 93, 0.35);

  /* —— Transitions ——————————————————————————————— */
  --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* —— Z-index ————————————————————————————————————— */
  --z-base: 1;
  --z-sticky: 50;
  --z-header: 100;
  --z-modal: 1000;
}

/* —— Mode reduced-motion : on coupe les animations ——— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}