:root {
  /* === brand colors === */
  --bg: #f4f1ec;                 /* light background (used rarely now) */
  --card: #ffffff;               /* light cards if/when needed */
  --ink: #1f2a25;                /* dark text on light */
  --accent: #b48b57;             /* brass/wood highlight */
  --accent-ink: #ffffff;         /* text on accent */

  /* === nav palette (dark) === */
  --nav-bg: #1f2a25;             /* deep forest green */
  --nav-ink: #f4f1ec;            /* light text on nav */
  --nav-hover: color-mix(in oklab, var(--accent) 16%, transparent);
  --nav-active-bg: var(--accent);
  --nav-active-ink: #1f2a25;

  /* === dark green “surfaces” for the whole site === */
  --surface-1: #0f1815;          /* page background */
  --surface-2: #1a2823;          /* section alt */
  --surface-3: #24352f;          /* cards/panels */
  --surface-border: rgba(255,255,255,.08);

  /* === type === */
  --font-base: "Poppins","Segoe UI",system-ui,sans-serif;
  --font-heading: "Poppins","Segoe UI",system-ui,sans-serif;
  --font-size-base: 16px;

  /* === layout + shape === */
  --radius: 12px;
  --shadow: 0 10px 28px rgba(0,0,0,.20);

  /* === spacing === */
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 40px;

  /* === transitions === */
  --ease: .2s ease;

  /* === nav sizing tokens (easy to tweak) === */
  --container: 1200px;
  --nav-height: 88px;
  --nav-logo: 56px;
  --nav-link-h: 48px;
  --nav-gap: 18px;
}