/* ============================================================
   DILLAN — Design Tokens
   Page: LP 1 · lp/google/vendre-en-viager
   Mockup version: May 2026
   ============================================================ */

:root {

  /* ─── Colors ─────────────────────────────────────────── */
  --color-navy:        #00355F;
  --color-orange:      #E28500;
  --color-bg:          #FCFCFC;
  --color-surface:     #FFFFFF;
  --color-text:        #1A1A1A;
  --color-text-muted:  #5A6772;
  --color-divider:     #E8EBEE;
  --color-success:     #2A7A45;
  --color-warning:     #D17A00;
  --color-danger:      #A8322B;
  --color-focus:       #0099FF;

  /* ─── Typography ─────────────────────────────────────── */
  --font-body:    Inter, Verdana, system-ui, -apple-system, sans-serif;
  --font-heading: Inter, 'Trebuchet MS', sans-serif;

  /* Type scale — clamp() scales from mobile to desktop baseline */
  --fs-h1:      clamp(36px, 4vw, 44px);
  --fs-h2:      clamp(26px, 3vw, 32px);
  --fs-h3:      clamp(20px, 2.5vw, 24px);
  --fs-h4:      18px;
  --fs-body:    18px;
  --fs-body-lg: 20px;
  --fs-caption: 14px;

  /* Line heights */
  --lh-body:    1.55;
  --lh-heading: 1.2;

  /* Font weights */
  --fw-body:    400;
  --fw-strong:  600;
  --fw-heading: 700;

  /* ─── Spacing (4pt base) ────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;

  /* ─── Layout ────────────────────────────────────────── */
  --container-max:  1100px;
  --container-form: 720px;
  --container-faq:  880px;
  --container-text: 720px;

  --px-mobile:  24px;
  --px-tablet:  48px;
  --px-desktop: 64px;

  /* ─── Radii ─────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* ─── Shadows ────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.08);

  /* ─── Motion ─────────────────────────────────────────── */
  --ease-ui:         cubic-bezier(0.2, 0, 0, 1);
  --duration-ui:     200ms;
  --duration-reveal: 400ms;
  --transition-ui:   200ms cubic-bezier(0.2, 0, 0, 1);

}

/* Respect reduced motion — collapse all transitions */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-ui:     1ms;
    --duration-reveal: 1ms;
    --transition-ui:   1ms;
  }
}