/* Woodly Doodly — brand tokens + base */
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Karla:ital,wght@0,300..800;1,300..800&family=Caveat:wght@400..700&family=DM+Mono:wght@300;400;500&display=swap");

/* fonts */


/* colors */
:root{

--green-950:#1B2417;--green-900:#24301F;--green-800:#2E3B27;--green-700:#3A4931;--green-600:#4A5B3F;--green-500:#5E7150;--green-400:#77896A;--green-300:#8C9B7A;--green-200:#B9C4A8;--green-100:#DCE3D3;--green-50:#EFF2E9;

--blush-50:#FAF6F3;--blush-100:#EFE8E4;--blush-200:#E4DAD4;--blush-300:#D3C5BC;--blush-400:#B8A79C;--blush-500:#968377;

--clay-700:#8E4A2F;--clay-600:#A85B3C;--clay-500:#C2714F;--clay-300:#E3A98C;--clay-100:#F6E2D6;

--ochre-700:#8F6318;--ochre-600:#B07C22;--ochre-400:#D9A24B;--ochre-200:#EFD39A;--ochre-100:#F7E9CC;

--bark-700:#4A3A2C;--bark-500:#6B5544;--bark-300:#A08A76;--bark-100:#E7DCD1;

--ink-900:#26221C;--ink-700:#413A31;--ink-500:#6B6157;--ink-300:#9A9088;
--white:#FFFFFF;


--text-strong:var(--green-900);
--text-body:var(--ink-700);
--text-muted:var(--ink-500);
--text-subtle:var(--ink-300);
--text-inverse:var(--blush-50);
--text-brand:var(--green-700);
--text-accent:var(--clay-600);
--text-link:var(--green-700);
--text-link-hover:var(--clay-600);


--surface-page:var(--blush-100);
--surface-page-alt:var(--blush-50);
--surface-card:var(--white);
--surface-sunken:var(--blush-200);
--surface-brand:var(--green-700);
--surface-brand-soft:var(--green-50);
--surface-accent:var(--clay-500);
--surface-accent-soft:var(--clay-100);
--surface-warm:var(--ochre-100);
--surface-inverse:var(--green-900);
--surface-overlay:rgba(38,34,28,.44);


--border-hairline:rgba(58,73,49,.12);
--border-soft:var(--blush-200);
--border-default:var(--blush-300);
--border-strong:var(--green-700);
--border-accent:var(--clay-500);
--border-focus:var(--green-600);


--action-primary:var(--green-700);
--action-primary-hover:var(--green-800);
--action-primary-press:var(--green-900);
--action-secondary:var(--clay-500);
--action-secondary-hover:var(--clay-600);
--action-secondary-press:var(--clay-700);
--action-ghost-hover:var(--green-50);
--action-disabled:var(--blush-300);
--focus-ring:0 0 0 3px rgba(94,113,80,.32);


--status-success:var(--green-500);--status-success-soft:var(--green-50);
--status-warning:var(--ochre-600);--status-warning-soft:var(--ochre-100);
--status-danger:#A8402C;--status-danger-soft:#F7E0DA;
--status-info:var(--bark-500);--status-info-soft:var(--bark-100);
--status-sale:var(--clay-500);--status-new:var(--green-700);
}

/* typography */
:root{
--font-display:"Quicksand","Century Gothic","Avenir Next",system-ui,sans-serif;
--font-body:"Karla","Helvetica Neue",system-ui,sans-serif;
--font-hand:"Caveat","Bradley Hand",cursive;
--font-mono:"DM Mono",ui-monospace,"SFMono-Regular",monospace;

--font-heading:var(--font-display);
--font-ui:var(--font-body);
--font-accent:var(--font-hand);
--font-spec:var(--font-mono);


--text-3xs:11px;--text-2xs:12px;--text-xs:13px;--text-sm:14px;--text-base:16px;--text-md:18px;--text-lg:20px;--text-xl:24px;--text-2xl:30px;--text-3xl:38px;--text-4xl:48px;--text-5xl:60px;--text-6xl:76px;

--leading-tight:1.08;--leading-snug:1.2;--leading-normal:1.5;--leading-relaxed:1.65;
--weight-light:300;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;


--tracking-tight:-0.02em;--tracking-normal:0;--tracking-wide:0.04em;--tracking-wider:0.12em;--tracking-widest:0.26em;


--type-display:var(--weight-semibold) var(--text-4xl)/var(--leading-tight) var(--font-display);
--type-h1:var(--weight-semibold) var(--text-3xl)/var(--leading-snug) var(--font-display);
--type-h2:var(--weight-semibold) var(--text-2xl)/var(--leading-snug) var(--font-display);
--type-h3:var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-display);
--type-h4:var(--weight-semibold) var(--text-md)/var(--leading-snug) var(--font-display);
--type-body:var(--weight-regular) var(--text-base)/var(--leading-relaxed) var(--font-body);
--type-body-sm:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-body);
--type-label:var(--weight-medium) var(--text-xs)/var(--leading-normal) var(--font-body);
--type-eyebrow:var(--weight-semibold) var(--text-2xs)/var(--leading-normal) var(--font-display);
--type-price:var(--weight-medium) var(--text-md)/var(--leading-snug) var(--font-body);
--type-hand:var(--weight-regular) var(--text-lg)/var(--leading-snug) var(--font-hand);
--type-spec:var(--weight-regular) var(--text-2xs)/var(--leading-normal) var(--font-mono);
}

/* spacing */
:root{

--space-0:0;--space-px:1px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:32px;--space-8:40px;--space-9:48px;--space-10:64px;--space-11:80px;--space-12:96px;--space-13:128px;

--gap-inline:8px;--gap-stack:12px;--gap-group:24px;--gap-section:64px;--gap-band:96px;
--pad-control-y:10px;--pad-control-x:18px;--pad-card:20px;--pad-card-lg:28px;--pad-page-x:32px;
--container-narrow:680px;--container-text:760px;--container:1200px;--container-wide:1440px;
--control-h-sm:34px;--control-h:44px;--control-h-lg:54px;
}

/* radius */
:root{

--radius-none:0;--radius-xs:6px;--radius-sm:10px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--radius-2xl:40px;--radius-pill:999px;--radius-circle:50%;
--radius-control:var(--radius-pill);
--radius-input:var(--radius-md);
--radius-card:var(--radius-lg);
--radius-media:var(--radius-xl);
--radius-sheet:var(--radius-2xl);
--radius-badge:var(--radius-pill);

--border-width-hair:1px;--border-width:1.5px;--border-width-thick:2px;
--stroke-doodle:1.5px; 
}

/* elevation */
:root{

--shadow-none:none;
--shadow-xs:0 1px 2px rgba(58,73,49,.06);
--shadow-sm:0 1px 2px rgba(58,73,49,.05),0 4px 10px -6px rgba(58,73,49,.14);
--shadow-md:0 2px 4px rgba(58,73,49,.05),0 10px 24px -14px rgba(58,73,49,.20);
--shadow-lg:0 4px 8px rgba(58,73,49,.06),0 24px 48px -24px rgba(58,73,49,.26);
--shadow-xl:0 8px 16px rgba(58,73,49,.07),0 40px 80px -32px rgba(58,73,49,.30);
--shadow-inset:inset 0 1px 2px rgba(58,73,49,.08);
--shadow-lift:0 6px 12px rgba(58,73,49,.07),0 18px 36px -18px rgba(58,73,49,.24);
--blur-veil:blur(14px); 
--veil-warm:rgba(250,246,243,.72);
--veil-green:rgba(36,48,31,.55);
--protect-bottom:linear-gradient(to top,rgba(36,48,31,.62),rgba(36,48,31,0)); 
}

/* motion */
:root{
--dur-instant:90ms; --dur-fast:140ms; --dur-base:220ms; --dur-slow:340ms; --dur-slower:520ms; 
--ease-out:cubic-bezier(.2,.8,.3,1); 
--ease-in-out:cubic-bezier(.5,0,.3,1); 
--ease-doodle:cubic-bezier(.34,1.32,.64,1);  
--transition-control:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-doodle),box-shadow var(--dur-base) var(--ease-out);
--transition-card:transform var(--dur-base) var(--ease-doodle),box-shadow var(--dur-base) var(--ease-out);
--press-scale:0.97; --lift-y:-3px; 
}

/* base */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:var(--type-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;color:var(--text-strong);text-wrap:pretty}
h1{font:var(--type-h1)}h2{font:var(--type-h2)}h3{font:var(--type-h3)}h4{font:var(--type-h4)}
p{margin:0 0 var(--space-4);text-wrap:pretty}
a{color:var(--text-link);text-decoration-color:color-mix(in oklab,var(--text-link) 40%,transparent);text-underline-offset:3px;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--text-link-hover);text-decoration-color:currentColor}
button,input,select,textarea{font:inherit}
img{display:block;max-width:100%}
::selection{background:var(--green-100);color:var(--green-900)}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
.wd-hand{font:var(--type-hand);color:var(--text-accent)}
.wd-eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted)}