/* ─── Design tokens ─── */
:root {
  --c-bg:           #EFF1EA;
  --c-bg-alt:       #E6E9DE;
  --c-ink:          #16221C;
  --c-green:        #4FA36B;
  --c-green-light:  #7EC293;
  --c-green-dark:   #2A5443;
  --c-forest:       #1F3D31;
  --c-amber:        #E0A458;
  --c-amber-dark:   #C48B3A;
  --c-terra:        #D9694B;
  --c-terra-dark:   #BF5038;

  --f-display: 'Bricolage Grotesque', sans-serif;
  --f-body:    'Hanken Grotesk', sans-serif;
  --f-mono:    'JetBrains Mono', monospace;

  --r-card:    20px;
  --r-card-lg: 24px;
  --r-pill:    100px;
  --r-chip:    10px;
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }
h1, h2, h3 { margin: 0; }

/* ─── Focus ─── */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─── Checkbox ─── */
input[type="checkbox"] {
  accent-color: var(--c-green);
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb { background: #C0C8B3; border-radius: 10px; }

/* ─── Global helpers ─── */
.grad-a {
  background: linear-gradient(135deg, var(--c-green), var(--c-green-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--c-green);
  text-transform: uppercase;
  display: block;
}

.text-green { color: var(--c-green); }