/* ==========================================================================
   La Pierre Immobilier — Design tokens (repris à l'identique du design system)
   Couleurs · Typographie · Espacements · Mouvement
   Ne pas modifier les valeurs : c'est la charte officielle LPI.
   ========================================================================== */

/* ---- COULEURS ----------------------------------------------------------- */
:root {
  /* Palette brute */
  --lpi-blanc-casse: #F4F1EB;
  --lpi-blanc-clair: #F7F5F1;
  --lpi-taupe:       #C9C2B6;
  --lpi-gris-doux:   #8A867D;
  --lpi-noir-doux:   #1F1B18;
  --lpi-marron:      #492620;
  --lpi-rouge:       #BE0B12;

  /* Tints */
  --lpi-marron-hover: #5C322A;
  --lpi-marron-press: #3A1E19;
  --lpi-rouge-press:  #9E090F;
  --lpi-taupe-soft:   #DEDAD1;
  --lpi-noir-80:      rgba(31, 27, 24, 0.80);
  --lpi-noir-60:      rgba(31, 27, 24, 0.60);
  --lpi-blanc-12:     rgba(247, 245, 241, 0.12);

  /* Rôles sémantiques — CLAIR (défaut) */
  --bg-base:        var(--lpi-blanc-casse);
  --surface-1:      var(--lpi-blanc-clair);
  --surface-sunken: var(--lpi-taupe-soft);
  --border-hair:    var(--lpi-taupe);
  --border-strong:  var(--lpi-noir-doux);

  --text-primary:   var(--lpi-noir-doux);
  --text-secondary: var(--lpi-gris-doux);
  --text-on-accent: var(--lpi-blanc-clair);
  --text-serif:     var(--lpi-marron);

  --accent:       var(--lpi-marron);
  --accent-hover: var(--lpi-marron-hover);
  --accent-press: var(--lpi-marron-press);
  --accent-rare:  var(--lpi-rouge);
  --focus-ring:   var(--lpi-marron);
}

/* Rôles sémantiques — NUIT (moments d'impact) */
.lpi-night {
  --bg-base:        var(--lpi-noir-doux);
  --surface-1:      #2A2521;
  --surface-sunken: #161311;
  --border-hair:    var(--lpi-blanc-12);
  --border-strong:  var(--lpi-blanc-clair);

  --text-primary:   var(--lpi-blanc-casse);
  --text-secondary: var(--lpi-taupe);
  --text-serif:     #C99B86;
  --accent:         var(--lpi-blanc-casse);
}

/* ---- TYPOGRAPHIE -------------------------------------------------------- */
:root {
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

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

  --t-display:  clamp(3.5rem, 7vw, 6rem);
  --t-h1:       clamp(2.5rem, 5vw, 4rem);
  --t-h2:       clamp(2rem, 4vw, 2.5rem);
  --t-h3:       1.75rem;
  --t-h4:       1.25rem;
  --t-body-lg:  1.125rem;
  --t-body:     1rem;
  --t-small:    0.875rem;
  --t-caption:  0.8125rem;
  --t-label:    0.75rem;

  --lh-tight:   0.95;
  --lh-snug:    1.1;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  --ls-display: -0.02em;
  --ls-tight:   -0.015em;
  --ls-normal:  0;
  --ls-label:   0.14em;
}

/* ---- ESPACEMENTS · RAYONS · FILETS · MOUVEMENT ------------------------- */
:root {
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-pill: 999px;

  --hairline: 1px solid var(--border-hair);
  --keyline:  2px solid var(--border-strong);

  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(31, 27, 24, 0.04), 0 1px 1px rgba(31, 27, 24, 0.03);
  --shadow-md: 0 4px 16px rgba(31, 27, 24, 0.06);
  --shadow-lift: 0 12px 40px rgba(31, 27, 24, 0.10);

  --measure: 66ch;
  --gutter: var(--sp-5);
  --page-margin: var(--sp-8);
  --grid-cols: 12;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;
}