/* ==========================================================================
   Design Tokens — Cabinet Dentaire de Satigny
   Extracted from Figma maquettes (1728px)
   ========================================================================== */

:root {
  /* --- Colors --- */
  --color-primary:        #1e347e;   /* darkslateblue-200, main brand */
  --color-primary-light:  #3851a2;   /* darkslateblue-100 */
  --color-accent:         #4892cf;   /* steelblue, accent highlights */
  --color-accent-light:   #bbd4ea;   /* lightsteelblue, card backgrounds */
  --color-danger:         #de1a41;   /* crimson, urgence */
  --color-danger-bg:      rgba(222, 26, 65, 0.09);
  --color-text:           #1e347e;
  --color-text-muted:     #676363;   /* dimgray */
  --color-white:          #fff;
  --color-midnight:       #1f0c5d;   /* midnightblue, CTA buttons */
  --color-black:          #000;
  --color-text-secondary: #555;
  --color-text-light:     #999;

  /* --- Typography --- */
  --font-primary:   'Author', 'Author Variable', sans-serif;

  /* Font sizes - Fluid Typography avec clamp() */
  /* Format: clamp(min-mobile, fluid-vw, max-desktop) */
  --fs-10:  0.8rem;           /* 9-10px - credits */
  --fs-16:  0.9rem;              /* 14-16px - body small */
  --fs-18:  clamp(1rem, 1.25vw, 1.125rem);              /* 16-18px - footer text */
  --fs-20:  clamp(1.025rem, 1.35vw, 1.25rem);           /* 17-20px - nav / small btn */
  --fs-22:  clamp(1.1rem, 1.45vw, 1.35rem);           /* 17-20px - nav / small btn */
  --fs-23:  clamp(1.15rem, 1.5vw, 1.455rem);             /* 19-23px - subtitle */
  --fs-24:  clamp(1.25rem, 1.55vw, 1.5rem)   ;               /* 20-24px - body / btn */
  --fs-26:  clamp(1.313rem, 1.65vw, 1.625rem);             /* 21-26px - lead text */
  --fs-28:  clamp(1.375rem, 1.75vw, 1.75rem);              /* 22-28px - section subtitle */
  --fs-30:  clamp(1.5rem, 2vw, 1.875rem);                  /* 24-30px - classic h2 */
  --fs-32:  clamp(1.65rem, 2.25vw, 2.125rem);              /* 22-28px - section subtitle */
  --fs-38:  clamp(1.7rem, 2.35vw, 2.35rem);              /* 22-28px - section subtitle */
  --fs-44:  clamp(1.75rem, 2.5vw, 2.75rem);               /* 28-44px - card title */
  --fs-50:  clamp(2rem, 3vw, 3.125rem);                /* 32-50px - section heading */
  --fs-72:  clamp(2.25rem, 4.5vw, 4.5rem);                /* 32-50px - section heading */
  --fs-80:  clamp(2.5rem, 5vw, 5rem);                   /* 40-80px - hero heading */
  --fs-hero: clamp(3rem, 6vw, 5rem);                  /* 48-111px - homepage hero */

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

  --font-size-sm: 0.875rem;         /* 14px — small text */

  /* Letter spacing */
  --ls-tight:   -0.03em;
  --ls-normal:  -0.02em;
  --ls-slight:  -0.01em;

  /* Line heights */
  --lh-tight:    90%;
  --lh-snug:     100%;
  --lh-body:     105%;
  --lh-relaxed:  119%;
  --lh-loose:    130%;
  --lh-review:   102%;

  /* --- Spacing — Pur vw (réf. 1728px) + plancher rem pour petits écrans --- */
  --space-xs:   0.625rem;                                    /* 10px — fixe */
  --space-sm:   1rem;                                        /* 16px — fixe */
  --space-md:   max(0.94rem, 1.39vw);                        /* 24px @1728 · min 15px */
  --space-lg:   max(1.25rem, 2.31vw);                        /* 40px @1728 · min 20px */
  --space-xl:   max(1.5rem,  2.78vw);                        /* 48px @1728 · min 24px */
  --space-2xl:  max(1.875rem, 3.70vw);                       /* 64px @1728 · min 30px */
  --space-3xl:  max(2.25rem, 4.63vw);                        /* 80px @1728 · min 36px */
  --space-4xl:  max(2.5rem,  5.56vw);                        /* 96px @1728 · min 40px */

  /* --- Border radius --- */
  --radius-sm:   3px;
  --radius-md:   7px;
  --radius-lg:   10px;

  /* --- Layout --- */
  --site-width:     108rem;  /* 1728px */
  --content-width:  101.125rem; /* 1618px */
  --nav-height:     80px; /* 100px */

  /* --- Shadows --- */
  --shadow-card: 0 2px 12px rgba(30, 52, 126, 0.06);
}