/* ============================================================
   Modera Space — Design Tokens
   Palette: "Warm Stone & Clay"  ·  Type: Cormorant Garamond + Inter
   ============================================================ */

:root {
  /* ---------- Color: light ---------- */
  --color-bg:           #f4f1ea; /* warm sand */
  --color-bg-alt:       #ece7dc; /* stone */
  --color-surface:      #ffffff;
  --color-surface-alt:  #e9e3d8;
  --color-border:       #ddd5c6;
  --color-border-soft:  #e7e0d3;

  /* ---------- Color: dark sections / footer ---------- */
  --color-dark-bg:      #1c1916; /* espresso */
  --color-dark-surface: #262019;
  --color-dark-border:  #3a342c;

  /* ---------- Accent: muted clay ---------- */
  --color-accent:       #a96f4c;
  --color-accent-soft:  #c08b6a;
  --color-accent-deep:  #8c5a3b;

  --color-error:        #c0392b;
  --color-error-soft:   rgba(192, 57, 43, .12);

  /* ---------- Text ---------- */
  --color-text:         #1f1b17; /* near-black warm */
  --color-text-muted:   #6a6055; /* readable muted */
  --color-text-soft:    #8a7f72;
  --color-text-invert:  #f4f1ea;
  --color-text-on-dark: #ece5da;
  --color-muted-on-dark:#a89f92;

  /* ---------- Fonts ---------- */
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---------- Fluid type scale ---------- */
  --fs-hero:   clamp(2.75rem, 1.4rem + 6vw, 6rem);
  --fs-h1:     clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
  --fs-h2:     clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  --fs-h3:     clamp(1.3rem, 1.05rem + 1vw, 1.6rem);
  --fs-lead:   clamp(1.15rem, 1.02rem + 0.55vw, 1.4rem);
  --fs-body:   clamp(1rem, 0.97rem + 0.18vw, 1.0938rem); /* 16–17.5 */
  --fs-small:  0.9375rem; /* 15 */
  --fs-label:  0.78rem;   /* ~12.5 caps */

  /* ---------- Weights ---------- */
  --fw-body:    400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-display: 500;

  /* ---------- Line height ---------- */
  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.7;

  /* ---------- Letter spacing ---------- */
  --ls-label: 0.22em;
  --ls-wide:  0.04em;

  /* ---------- Spacing ---------- */
  --space-section: clamp(72px, 8vw, 132px);
  --gap: clamp(20px, 3vw, 40px);

  /* ---------- Radius ---------- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ---------- Shadow ---------- */
  --shadow-soft: 0 2px 16px rgba(28, 25, 22, .06);
  --shadow-card: 0 12px 40px rgba(28, 25, 22, .12);
  --shadow-hero: 0 24px 70px rgba(0, 0, 0, .28);

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-pad: clamp(20px, 5vw, 64px);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(.22, .61, .36, 1);
  --ease-inout: cubic-bezier(.65, .05, .36, 1);
  --dur-fast: .25s;
  --dur:      .45s;
  --dur-slow: .8s;

  --header-h: 76px;
}