:root{
  /* base palette */
  --green-forest:#2b7a58;
  --green-pine:#17301f;
  --cream:#faf6e3;
  --cream-soft:#fffdf4;
  --butter:#ece287;
  --sage:#5e6b5f;
  --sage-light:#9aa393;
  --photo-fill:#e2ddc5;

  /* tints derived from the base palette (oklch, stays in family) */
  --green-forest-hover:oklch(from var(--green-forest) calc(l - 0.05) c h);
  --green-forest-soft:oklch(from var(--green-forest) calc(l + 0.32) calc(c * 0.35) h);
  --butter-deep:oklch(from var(--butter) calc(l - 0.08) calc(c * 1.1) h);
  --cream-shade:oklch(from var(--cream) calc(l - 0.04) c h);
  --hairline:oklch(from var(--green-pine) calc(l + 0.55) calc(c * 0.4) h);

  /* semantic surfaces */
  --surface-page:var(--cream);
  --surface-card:var(--cream-soft);
  --surface-inverse:var(--green-forest);
  --surface-deep:var(--green-pine);
  --surface-accent:var(--butter);
  --surface-photo:var(--photo-fill);

  /* semantic text */
  --text-heading:var(--green-pine);
  --text-body:var(--sage);
  --text-label:var(--sage-light);
  --text-on-green:var(--cream);
  --text-on-butter:var(--green-pine);
  --text-link:var(--green-forest);
  --text-link-hover:var(--green-pine);

  /* lines + accents */
  --border-strong:var(--green-pine);
  --border-hairline:var(--hairline);
  --accent:var(--butter);
  --accent-ink:var(--green-forest);
}