/* tokens/fonts.css */
/* Nunito Sans — body & UI (soft, rounded terminals). Tenor Sans — H1–H3 / display (soft contrast strokes; matches the STRUG atelier logo).
   Loaded from Google Fonts; self-host woff2 for production (performance requirement). */
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,300..700&family=Tenor+Sans&display=swap");

/* tokens/colors.css */
:root{
/* Szałwia — light, natural, approachable */
--white:#FFFFFF;
--paper:#F7F5F0;
--stone-100:#EFEDE6;
--stone-200:#E2DFD6;
--stone-300:#CFCBC0;
--ink-900:#2B2B28;
--ink-600:#6B6A63;
--ink-500:#8A8980;
--wood:#D9B98C;
--sage-50:#EEF1EA;
--sage-100:#DDE3D6;
--sage-500:#7C8C6E;
--sage-600:#66755A;
--sage-700:#56634B;
/* grey-* names kept for component compatibility */
--grey-50:var(--paper);
--grey-100:var(--stone-100);
--grey-200:var(--stone-200);
--grey-300:var(--stone-300);
--grey-500:var(--ink-500);
--grey-600:var(--ink-600);
--grey-800:var(--ink-900);
--grey-900:var(--ink-900);
/* Semantic */
--ok-600:#2F7D4F;--ok-50:#EAF5EE;
--red-600:#B3362B;--red-50:#FBECEA;
--todo-bg:#FFF6D9;--todo-border:#E2B93B;--todo-fg:#7A5A00;

/* Aliases — 60 / 30 / 10 */
--bg:var(--paper);
--surface-1:var(--paper);
--surface-2:var(--stone-100);
--surface-3:var(--stone-200);
--surface-field:var(--white);
--surface-inverse:var(--ink-900);
--fg-inverse:var(--paper);
--header-bg:rgba(247,245,240,.94);
--fg-1:var(--ink-900);
--fg-2:var(--ink-600);
--fg-3:var(--ink-500);
--border-1:var(--stone-200);
--border-2:var(--stone-300);
--border-strong:var(--fg-1);
--icon:var(--wood);
--accent:var(--sage-500);
--accent-hover:var(--sage-600);
--accent-tint:var(--sage-100);
--accent-text:var(--sage-700);
--accent-border:var(--stone-200);
--surface-accent:var(--stone-100);
--fg-on-accent:var(--white);
--link:var(--accent-text);
--link-hover:var(--sage-600);
--focus-ring:var(--sage-600);
--success:var(--ok-600);--success-bg:var(--ok-50);
--danger:var(--red-600);--danger-bg:var(--red-50);
}

/* tokens/typography.css */
:root{
--font-sans:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-display:"Tenor Sans","Nunito Sans",system-ui,sans-serif;
--tracking-display:0.02em;
--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:600;
/* Mobile-first sizes */
--text-xs:13px;
--text-sm:15px;
--text-md:17px;
--text-lg:20px;
--text-xl:24px;
--text-2xl:30px;
--text-3xl:38px;
--text-4xl:48px;
--leading-tight:1.15;
--leading-snug:1.3;
--leading-body:1.55;
--tracking-tight:-0.015em;
--tracking-normal:0;
/* Semantic */
--type-display:400 clamp(36px,6.6vw,56px)/1.12 var(--font-display);
--type-h1:400 clamp(30px,5.2vw,44px)/1.14 var(--font-display);
--type-h2:400 clamp(24px,3.6vw,var(--text-2xl))/var(--leading-snug) var(--font-display);
--type-h3:400 var(--text-lg)/var(--leading-snug) var(--font-display);
--type-body:var(--weight-regular) var(--text-md)/var(--leading-body) var(--font-sans);
--type-small:var(--weight-regular) var(--text-sm)/var(--leading-body) var(--font-sans);
--type-label:var(--weight-medium) var(--text-sm)/1.3 var(--font-sans);
--type-price:var(--weight-bold) var(--text-xl)/1.2 var(--font-sans);
}

/* tokens/spacing.css */
:root{
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-8:32px;
--space-10:40px;
--space-12:48px;
--space-16:64px;
--space-20:80px;
--space-24:96px;
--container-max:1200px;
--container-pad:clamp(16px,4vw,32px);
--section-gap:clamp(56px,9vw,96px);
--control-h:52px;
--control-h-sm:44px;
--header-h:60px;
}

/* tokens/shape.css */
:root{
--radius-xs:2px;
--radius-sm:3px;
--radius-md:4px;
--radius-lg:6px;
--radius-xl:8px;
--radius-control:4px;
--radius-pill:999px;
--border-w:1px;
--icon-stroke:1.5; /* @kind other */
--shadow-0:none;
--shadow-1:0 1px 2px rgba(26,26,25,.06),0 1px 1px rgba(26,26,25,.04);
--shadow-2:0 6px 20px rgba(26,26,25,.08);
--ease:cubic-bezier(.2,.7,.3,1); /* @kind other */
--dur-fast:120ms; /* @kind other */
--dur:200ms; /* @kind other */
}

/* tokens/base.css */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg-1);font:var(--type-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;color:var(--fg-1);letter-spacing:0.01em;text-wrap:balance}
h1{font:var(--type-h1);letter-spacing:var(--tracking-display)}h2{font:var(--type-h2)}h3{font:var(--type-h3)}
p{margin:0;text-wrap:pretty}
a{color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--link-hover)}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.todo{display:inline;background:var(--todo-bg);color:var(--todo-fg);border:1px dashed var(--todo-border);border-radius:4px;padding:0 4px;font-weight:var(--weight-medium)}

/* tokens/motion.css */
:root{
--ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
--dur-reveal:1200ms; /* @kind other */
--reveal-shift:32px; /* @kind other */
}
/* Scroll reveal – elements get data-reveal from motion.js, .is-in when they enter the viewport */
[data-reveal]{opacity:0;transform:translate3d(0,var(--reveal-shift),0);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out);transition-delay:var(--d,0ms);will-change:opacity,transform}
[data-reveal="zoom"]{transform:scale(1.06);transition-duration:2200ms,2200ms}
[data-reveal="fade"]{transform:none}
[data-reveal].is-in{opacity:1;transform:none}
/* Image hover – slow, subtle zoom inside cards */
main article img,main figure img{transition:transform 1400ms var(--ease-out)}
main article:hover img,main figure:hover img{transform:scale(1.035)}
@media (prefers-reduced-motion:reduce){
[data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
main article:hover img,main figure:hover img{transform:none}
}