/* ──────────────────────────────────────────────
   TRU Realty — Design Tokens
   Editorial Luxury × Cinematic Storytelling
   ────────────────────────────────────────────── */

:root {
  /* ─── Color ─── */
  --paper:      #FAFAF9;   /* page background */
  --paper-2:    #F2EFEA;   /* warm off-white sections */
  --ink:        #0C0A09;   /* primary text on light */
  --ink-2:      #1C1917;   /* deep surface, hero scrim */
  --ink-3:      #292524;   /* secondary deep */
  --bone:       #E8E2D6;   /* warm divider, soft border */
  --mute:       #57534E;   /* secondary text */
  --mute-2:     #78716C;   /* tertiary text */
  --gold:       #18769B;   /* CTA, accent (teal) */
  --gold-2:     #1E96C2;   /* hover */
  --gold-soft:  #7FC0D8;   /* on dark headlines accent */
  --botanical:  #0F2E1F;   /* deep green for tags / dividers */
  --line:       rgba(12, 10, 9, 0.12);
  --line-light: rgba(250, 250, 249, 0.18);

  /* ─── Typography ─── */
  --font-display: "bressay-display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "nunito-sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (clamped for fluid responsive) */
  --fs-eyebrow: 0.72rem;            /* 11.5px mono uppercase */
  --fs-body:    1rem;               /* 16px */
  --fs-lede:    clamp(1.075rem, 0.95rem + 0.55vw, 1.35rem);
  --fs-h2:      clamp(2rem,    1.4rem  + 2.4vw, 3.4rem);
  --fs-h3:      clamp(1.625rem, 1.3rem + 1.4vw, 2.4rem);
  --fs-display: clamp(2.75rem, 1.6rem + 4.6vw, 6.25rem);
  --fs-display-md: clamp(2.4rem, 1.6rem + 3.2vw, 4.6rem);

  /* Line-heights */
  --lh-tight:  1.0;
  --lh-snug:   1.15;
  --lh-base:   1.55;
  --lh-prose:  1.7;

  /* Tracking */
  --tr-mono:   0.16em;
  --tr-tight: -0.01em;
  --tr-display: -0.015em;

  /* ─── Spacing scale (4pt) ─── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 160px;
  --s-12: 200px;

  /* ─── Layout ─── */
  --container:    1320px;
  --container-sm: 880px;
  /* Min raised 20px → 24px: at 375px the page was running very close to the
     edge, which read as dense rather than composed. */
  --gutter:       clamp(24px, 4vw, 48px);

  /* ─── Motion ─── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emph:   cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast:   180ms;
  --d-base:   320ms;
  --d-slow:   600ms;
  --d-cinema: 900ms;

  /* ─── Elevation ─── */
  --shadow-1: 0 1px 2px rgba(12, 10, 9, 0.06), 0 1px 1px rgba(12, 10, 9, 0.04);
  --shadow-2: 0 8px 24px rgba(12, 10, 9, 0.08), 0 2px 6px rgba(12, 10, 9, 0.05);
  --shadow-3: 0 24px 60px rgba(12, 10, 9, 0.18), 0 6px 18px rgba(12, 10, 9, 0.08);

  /* ─── Z-index scale ─── */
  --z-base:   1;
  --z-sticky: 50;
  --z-header: 100;
  --z-fab:    200;
  --z-modal:  500;
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast:   0ms;
    --d-base:   0ms;
    --d-slow:   0ms;
    --d-cinema: 0ms;
  }
}