/* Harmatliget — Color tokens
   Soft Scandinavian, warm earthy palette lifted verbatim from the live site.
   Base values first, then semantic aliases. */
:root {
  /* ---- Base palette ---- */
  --color-cream: #f6f1e8;      /* page background — warm off-white */
  --color-paper: #fffaf2;      /* lighter surface / footer / cards */
  --color-sand: #dccab3;       /* image placeholder / muted fill */
  --color-stone: #8d8274;      /* warm grey */
  --color-clay: #a4653e;       /* primary accent — terracotta */
  --color-clay-dark: #845033;  /* primary accent, hover/pressed */
  --color-brown: #332821;      /* heading ink */
  --color-ink: #2b2622;        /* body text */
  --color-muted: #70675e;      /* secondary text */
  --color-green: #73825c;      /* sage — success / "in planning" */
  --color-gold: #d9b36e;       /* warm gold — "in permitting" */
  --color-blue: #6d8baa;       /* muted slate blue — "gathering interest" */

  /* ---- Semantic surfaces ---- */
  --surface-page: var(--color-cream);
  --surface-raised: var(--color-paper);
  --surface-card: var(--color-cream);
  --surface-translucent: rgba(255, 250, 242, 0.96);
  --surface-image: var(--color-sand);

  /* ---- Semantic text ---- */
  --text-heading: var(--color-brown);
  --text-body: var(--color-ink);
  --text-muted: var(--color-muted);
  --text-on-clay: #fffaf4;       /* off-white text on dark/clay */
  --text-on-image: #fffaf4;
  --text-on-image-muted: rgba(255, 250, 244, 0.84);

  /* ---- Semantic action ---- */
  --action-primary: var(--color-clay);
  --action-primary-hover: var(--color-clay-dark);
  --action-text: var(--color-clay-dark);

  /* ---- Hairline borders ---- */
  --border-hairline: rgba(51, 40, 33, 0.1);
  --border-hairline-strong: rgba(51, 40, 33, 0.26);
  --border-on-image: rgba(255, 250, 244, 0.34);

  /* ---- Status ---- */
  --status-planning: var(--color-green);
  --status-permit: var(--color-gold);
  --status-interest: var(--color-blue);
}