/* Design tokens, copied verbatim from design/tokens/ (colors, typography, spacing, elevation). Update them there first, then
   copy them here. Fonts are loaded by theme.json, not tokens/fonts.css, so nothing is fetched from Google. */

/* ---- design/tokens/colors.css ---- */
:root{
/* ---- Moss — primary brand ---- */
--moss-50:#f1f3ea;--moss-100:#dce2c9;--moss-200:#b9c39c;--moss-300:#8e9a6e;--moss-400:#6a7752;--moss-500:#4e5a3a;--moss-600:#3d4a2a;--moss-700:#2d3820;--moss-800:#1f2716;--moss-900:#131810;
/* ---- Clay — warm accent, rationed ---- */
--clay-50:#faeede;--clay-100:#f0d3a8;--clay-200:#e3b274;--clay-300:#d39549;--clay-400:#c07a2e;--clay-500:#a0631e;--clay-600:#7d4d18;
/* ---- Paper — cream neutrals ---- */
--paper-50:#fbf8f0;--paper-100:#f4eedd;--paper-200:#e9e2cc;--paper-300:#d6cdb2;
/* ---- Ink — warm near-blacks ---- */
--ink-50:#f6f3e9;--ink-200:#b8b2a2;--ink-400:#6b6759;--ink-600:#3c3a30;--ink-800:#231f1a;--ink-900:#14110d;
/* ---- Status — low chroma, always paired with a word ---- */
--leaf-500:#4f7a3f;--honey-500:#c89321;--berry-500:#b04025;--sky-500:#3a6a7a;
--leaf-tint:rgba(79,122,63,.12);--honey-tint:rgba(200,147,33,.16);--berry-tint:rgba(176,64,37,.10);--sky-tint:rgba(58,106,122,.12);

/* ---- Semantic aliases — use these in components ---- */
--surface-page:var(--paper-50);
--surface-card:var(--paper-50);
--surface-sunken:var(--paper-100);
--surface-well:var(--paper-200);
--surface-inverse:var(--moss-700);
--surface-inverse-deep:var(--moss-800);
--surface-ink:var(--ink-800);

--text-body:var(--ink-800);
--text-heading:var(--ink-900);
--text-subhead:var(--ink-600);
--text-muted:var(--ink-400);
--text-faint:var(--ink-200);
--text-on-inverse:var(--paper-50);
--text-on-inverse-muted:var(--moss-100);
--text-brand:var(--moss-600);
--text-accent:var(--clay-500);
--text-accent-on-inverse:var(--clay-200);

--border-subtle:var(--paper-200);
--border-default:var(--paper-300);
--border-strong:var(--moss-700);
--border-on-inverse:var(--moss-500);

--action-primary:var(--moss-600);
--action-primary-hover:var(--moss-700);
--action-primary-text:var(--paper-50);
--action-accent:var(--clay-400);
--action-accent-hover:var(--clay-500);
--action-accent-text:var(--paper-50);
--action-quiet:var(--moss-700);
--focus-ring:rgba(78,90,58,.18);
--focus-ring-color:var(--moss-500);
}

/* ---- design/tokens/typography.css ---- */
:root{
--font-serif:'Newsreader',Georgia,'Times New Roman',serif;
--font-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
--font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;

/* Size scale */
--t-xs:12px;--t-sm:14px;--t-base:16px;--t-md:18px;--t-lg:22px;--t-xl:28px;--t-2xl:36px;--t-3xl:48px;--t-4xl:64px;--t-5xl:88px;

/* Weights */
--w-light:300;--w-regular:400;--w-medium:500;--w-semibold:600;

/* Line heights */
--lh-tight:.95;--lh-heading:1.05;--lh-snug:1.2;--lh-lede:1.4;--lh-body:1.55;

/* Tracking */
--tr-display:-.025em;--tr-heading:-.02em;--tr-snug:-.01em;--tr-normal:0;--tr-mono:.02em;--tr-eyebrow:.14em;--tr-label:.08em;

/* Composite roles */
--type-display:var(--w-light) var(--t-4xl)/var(--lh-tight) var(--font-serif);
--type-h1:var(--w-regular) var(--t-3xl)/var(--lh-heading) var(--font-serif);
--type-h2:var(--w-regular) var(--t-2xl)/var(--lh-snug) var(--font-serif);
--type-h3:var(--w-medium) var(--t-xl)/var(--lh-snug) var(--font-serif);
--type-lede:italic var(--w-light) var(--t-lg)/var(--lh-lede) var(--font-serif);
--type-body:var(--w-regular) var(--t-base)/var(--lh-body) var(--font-sans);
--type-small:var(--w-regular) var(--t-sm)/1.5 var(--font-sans);
--type-mono:var(--w-medium) var(--t-sm)/1.4 var(--font-mono);
--type-eyebrow:var(--w-medium) var(--t-xs)/1.2 var(--font-mono);
}

/* ---- design/tokens/spacing.css ---- */
:root{
/* 4px base */
--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;

/* Radii — restrained; the brand reads squarer than most commerce UI */
--r-xs:2px;--r-sm:4px;--r-md:8px;--r-lg:14px;--r-xl:22px;--r-pill:999px;

/* Component sizing */
--control-h-sm:30px;--control-h-md:40px;--control-h-lg:50px;
--tap-min:44px;
--container-max:1180px;
--content-measure:60ch;
}

/* ---- design/tokens/elevation.css ---- */
:root{
--shadow-1:0 1px 0 rgba(20,17,13,.06),0 1px 2px rgba(20,17,13,.04);
--shadow-2:0 2px 4px rgba(20,17,13,.06),0 8px 18px -8px rgba(20,17,13,.12);
--shadow-3:0 8px 24px -10px rgba(20,17,13,.18),0 2px 6px rgba(20,17,13,.06);
--shadow-stamp:inset 0 0 0 1.5px var(--moss-700);
--shadow-hairline:inset 0 0 0 1px rgba(20,17,13,.06);

/* Motion — short, no bounce, no spring */
--ease-standard:cubic-bezier(.2,0,.2,1);
--ease-out:cubic-bezier(0,0,.2,1);
--dur-fast:120ms;--dur-base:180ms;--dur-slow:280ms;
}