:root{
  /* palette — replace with your exact choices */
  --brand-1:#1c3a3e;   /* deep green/teal */
  --brand-2:#3f7a7f;   /* accent */
  --ink:#121417;
  --muted:#6b7175;
  --bg:#ffffff;
  --bg-alt:#f6f8f9;

  /* type scale */
  --font-sans: ui-sans-serif, system-ui, "Inter", "Helvetica Neue", Arial, sans-serif;
  --h1: clamp(2rem, 3.2vw, 3rem);
  --h2: clamp(1.6rem, 2.4vw, 2.25rem);
  --h3: clamp(1.25rem, 1.8vw, 1.5rem);
  --body: 1rem;
  --lead: 1.125rem;

  /* spacing, radius, shadow */
  --space-1:.5rem;
  --space-2:1rem;
  --space-3:1.5rem;
  --space-4:2rem;
  --radius:14px;
  --shadow:0 6px 24px rgba(0,0,0,.08);
}
/* Example: darker header with light links */
.header{ background: var(--brand-1); border-bottom:3px solid var(--accent-3); }
.nav a{ color: var(--bright-3); }
.nav a:hover{ color: var(--bright-4); }