:root{
--color-cream:#F1EAE0;
--color-sage:#8FA285;
--color-olive:#4F5A38;
--color-olive-dark:#3B4429;
--color-timber:#B98A54;
--color-timber-dark:#9C7443;
--color-charcoal:#1E1B15;
--color-ink:#29271F;
--color-white:#FFFFFF;

--surface-bg:var(--color-cream);
--surface-card:#FFFFFF;
--surface-dark:var(--color-charcoal);
--surface-sage-tint:#E7ECE3;
--surface-timber-tint:#F0E4D3;
--border-subtle:#DED4C4;
--border-on-dark:#3E3A31;

--text-body:var(--color-ink);
--text-muted:#6E6A5B;
--text-on-dark:var(--color-cream);
--text-on-dark-muted:#B7B2A4;
--text-on-accent:var(--color-cream);

--interactive:var(--color-olive);
--interactive-hover:var(--color-olive-dark);
--interactive-on-dark:var(--color-sage);

--accent-product:var(--color-sage);
--accent-wood:var(--color-timber);
}
:root{
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:24px;
--space-6:32px;
--space-7:48px;
--space-8:64px;
--space-9:96px;
--space-10:128px;

--container-max:1200px;
--container-pad:24px;
}
:root{
--radius-sm:10px;
--radius-md:18px;
--radius-lg:28px;
--radius-pill:999px;

--shadow-card:0 1px 2px rgba(30,27,21,.06),0 8px 24px rgba(30,27,21,.08);
--shadow-float:0 4px 16px rgba(30,27,21,.12);
}
:root{
--font-display:'Exo 2',ui-sans-serif,Arial,sans-serif;
--font-body:'Exo 2',ui-sans-serif,Arial,sans-serif;

--size-label:12px;
--size-caption:13px;
--size-body-sm:15px;
--size-body:17px;
--size-body-lg:19px;
--size-h4:22px;
--size-h3:28px;
--size-h2:40px;
--size-h1:56px;
--size-display:72px;

--lh-tight:1.08; /* @kind other */
--lh-heading:1.15; /* @kind other */
--lh-body:1.6; /* @kind other */

--tracking-label:.16em;
--tracking-tight:-.01em;
}