/* ========================================================================
   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-100: #efe2c9;

  /* ── Ink ── */
  --ink:         #14241c;
  --ink-strong:  #0a1611;
  --ink-muted:   #5a665e;
  --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 ── */
  --font-serif:  "Cormorant Garamond", "Noto Serif SC", Georgia, serif;
  --font-sans:   "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

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

  /* ── Shadows ── */
  --shadow-sm:   0 1px 2px rgba(20, 36, 28, 0.06);
  --shadow:      0 4px 16px rgba(20, 36, 28, 0.08);
  --shadow-lg:   0 16px 48px rgba(20, 36, 28, 0.14);

  /* ── Motion ── */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);

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

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