/* ========================================================================
   Ivan Chee · ERA Property Agent
   Design tokens - Forest Green + Wild Sand
   ======================================================================== */

:root {
  /* ── Forest green (primary brand) ── */
  --forest-900: #14241c;   /* near-black, body text on sand */
  --forest-800: #1f3528;
  --forest-700: #2d4a3e;   /* PRIMARY brand colour */
  --forest-600: #3d5e4f;   /* hover / mid */
  --forest-500: #547062;
  --forest-200: #b8c8be;
  --forest-100: #d8e2da;   /* tint for blocks */
  --forest-50:  #ecf1ed;

  /* ── Wild sand (canvas + warmth) ── */
  --sand-50:  #faf7ef;     /* page background */
  --sand-100: #f3ecda;
  --sand-200: #e8e1d3;     /* "wild sand" canonical */
  --sand-300: #d4c8b1;
  --sand-400: #b8a989;
  --sand-700: #6b5f47;     /* sand for muted text on light */

  /* ── Warm gold (awards / credentials accent) ── */
  --gold-700: #9d7a47;
  --gold-600: #b8945c;     /* primary accent */
  --gold-500: #c9a672;
  --gold-400: #d8bd86;     /* brighter highlight on dark surfaces */
  --gold-100: #efe2c9;

  /* ── Deep tones for drenched / immersive sections ── */
  --forest-950: #0c1611;   /* near-black green, drenched feature sections */

  /* ── Terracotta (anti-slop accent - sparingly, against forest+gold reflex) ── */
  --terra-700: #a25238;
  --terra-600: #c2683c;
  --terra-500: #d8845a;

  /* ── Ink ── */
  --ink:         #14241c;
  --ink-strong:  #0a1611;
  --ink-muted:   #3a4a40;
  --ink-faint:   #8a948e;

  /* ── Surface ── */
  --surface:     #ffffff;
  --surface-alt: var(--sand-50);
  --surface-deep: var(--forest-700);
  --surface-deep-ink: var(--sand-100);

  /* ── Borders ── */
  --line:        #d9d2bf;
  --line-soft:   #e6dfca;
  --line-strong: #b3a988;

  /* ── Type scale - TWO families only ──
     Cormorant Garamond = display & headings. Inter = everything else
     (body, UI, and labels via uppercase + letter-spacing). The old mono
     label face (IBM Plex Mono) was retired site-wide for a cleaner,
     single-voice type system; --font-mono now resolves to the sans stack
     so every existing label keeps working without per-rule edits. */
  --font-serif:  "Cormorant Garamond", "Noto Serif SC", Georgia, serif;
  --font-sans:   "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:   var(--font-sans);

  /* ── Sizing ── */
  --container:   1200px;
  --container-narrow: 900px;
  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ── Elevation - warm, soft, layered (tinted toward warm ink, never cool grey) ── */
  --shadow-xs:   0 1px 2px rgba(43, 30, 10, 0.05);
  --shadow-sm:   0 1px 2px rgba(43, 30, 10, 0.05), 0 3px 7px -3px rgba(43, 30, 10, 0.08);
  --shadow:      0 2px 4px rgba(43, 30, 10, 0.04), 0 12px 26px -10px rgba(43, 30, 10, 0.14);
  --shadow-lg:   0 4px 10px rgba(43, 30, 10, 0.05), 0 26px 56px -18px rgba(43, 30, 10, 0.20);
  --shadow-xl:   0 8px 18px rgba(43, 30, 10, 0.06), 0 44px 90px -28px rgba(43, 30, 10, 0.28);

  /* ── Motion ── */
  --ease:          cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);    /* ease-out-expo, dramatic settle */
  --ease-out-quart:cubic-bezier(0.25, 1, 0.5, 1);    /* gentler, for hovers */

  /* ── Layout ── */
  --nav-height: 72px;
}

@media (max-width: 768px) {
  :root { --nav-height: 60px; }
}