:root {
  
  --surface-base: #ffffff;
  --surface-raised: #f0fdf4;
  --surface-sunken: #dcfce7;
  --surface-ink: #052e16;
  --surface-overlay: rgba(5, 46, 22, 0.55);

  
  --action-primary: #15803d;
  --action-hover: #0f5c37;
  --action-bright: #16a34a;
  --action-ink: #052e16;
  --action-disabled: #9db3a5;

  
  --signal-warm: #b4623c;
  --signal-warm-soft: #f6e7df;
  --signal-ok: #1f7a4d;
  --signal-alert: #a33a26;

  
  --text-primary: #052e16;
  --text-secondary: #365314;
  --text-muted: #6b8878;
  --text-inverse: #f1f8f1;

  
  --line-soft: #dbe8dc;
  --line-strong: #052e16;
  --shadow-soft: 0 0.35em 1.4em rgba(5, 46, 22, 0.08);
  --shadow-lift: 0 1em 2.4em rgba(5, 46, 22, 0.14);
  --focus-ring: 0 0 0 0.18em rgba(21, 128, 61, 0.38);

  
  --radius-s: 0.5em;
  --radius-m: 0.9em;
  --radius-l: 1.6em;
  --radius-pill: 62em;

  
  --space-3xs: 0.35em;
  --space-2xs: 0.6em;
  --space-xs: 0.9em;
  --space-s: 1.4em;
  --space-m: 2.1em;
  --space-l: 3.2em;
  --space-xl: 4.6em;
  --space-band: 6em;

  
  --font-body: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  --font-script: 'Yellowtail', 'Segoe Script', cursive;
  --lead: 1.62;

  
  --tap: 0.18s ease;
  --glide: 0.36s cubic-bezier(0.32, 0.72, 0.3, 1);
}

html {
  box-sizing: border-box;
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.6em;
}

*, *::before, *::after { box-sizing: inherit; }

body {
  font-family: var(--font-body);
  font-size: 1.0625em;
  line-height: var(--lead);
  color: var(--text-primary);
  background: var(--surface-base);
  margin: 0;
  position: relative;
  -webkit-font-smoothing: antialiased;
  padding-top: 4.9em;
}

h1, h2, h3, h4 {
  font-family: var(--font-body);
  line-height: 1.24;
  letter-spacing: -0.012em;
  margin: 0 0 var(--space-s);
  text-wrap: balance;
}

h1 { font-size: 1.95em; font-weight: 700; }
h2 { font-size: 1.5em; font-weight: 650; }
h3 { font-size: 1.2em; font-weight: 600; }
h4 { font-size: 1.05em; font-weight: 600; }

p { margin: 0 0 var(--space-s); }

a { color: var(--action-primary); text-decoration-thickness: 0.07em; text-underline-offset: 0.18em; }
a:hover { color: var(--action-hover); }

img { max-width: 100%; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-s); }

::selection { background: var(--signal-warm-soft); color: var(--text-primary); }

@media (max-width: 768px) {
  body { font-size: 1em; padding-top: 4.4em; padding-bottom: 4.6em; }
  h1 { font-size: 1.72em; }
  h2 { font-size: 1.36em; }
  :root { --space-band: 3.6em; --space-xl: 3em; --space-l: 2.4em; }
}