/* Kuck redesign — tokeny (--kr-*) i fonty.
   Plik wygenerowany: redesign/tools/jinja/codemod/build-shell-css.mjs (prefix.mjs) ze źródeł mockupu tokens.css.
   Nie edytuj ręcznie: zmiany wprowadzaj w mockupie albo w codemod/overlay/*.css i zbuduj ponownie. */

/* Kuck redesign — design tokens (v0.2: sharp edges, Material Symbols Sharp).
   Base: docs/design/storefront-baseline.md (--ks-* contract). Names are kept
   short here; production maps 1:1 to --ks-color-*, --ks-space-*, --ks-font-sans. */

@font-face {
	font-family: "Montserrat";
	src: url("/assets/kuck_shop/fonts/redesign/Montserrat-latin-ext-var.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* Subset of Material Symbols Sharp (see tools/fetch-icons.mjs). block: no flash of ligature text. */
@font-face {
	font-family: "Material Symbols Sharp";
	src: url("/assets/kuck_shop/fonts/redesign/material-symbols-sharp.woff2") format("woff2");
	font-weight: 200 500;
	font-style: normal;
	font-display: block;
}

:root {
	color-scheme: light;

	/* colour — monochrome base, product photography supplies the colour */
	--kr-ink: #111111;
	--kr-ink-soft: #2b2b2b;
	--kr-ink-raised: #1b1b1b;
	--kr-muted: #62666a;
	--kr-muted-on-dark: #a9acaf;
	--kr-paper: #ffffff;
	--kr-stone: #f5f5f4;
	--kr-stone-deep: #ecebe9;
	--kr-line: #dadcdd;
	--kr-line-strong: #111111;
	--kr-line-on-dark: rgb(255 255 255 / 18%);
	--kr-sale: #c5161d;
	--kr-ok: #166534;
	--kr-warn: #8a4b08;
	--kr-danger: #b42318;
	--kr-focus: #005fcc;
	--kr-overlay: rgb(17 17 17 / 55%);

	/* type */
	--kr-font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* space (baseline scale) */
	--kr-s1: 4px;
	--kr-s2: 8px;
	--kr-s3: 12px;
	--kr-s4: 16px;
	--kr-s5: 24px;
	--kr-s6: 32px;
	--kr-s7: 48px;
	--kr-s8: 64px;
	--kr-s9: 96px;

	/* shape: every edge is square. Depth = hairlines + one layered shadow for floating layers. */
	--kr-radius: 0;
	--kr-shadow-float: 0 1px 2px rgb(0 0 0 / 6%), 0 12px 28px -8px rgb(0 0 0 / 18%), 0 32px 64px -16px rgb(0 0 0 / 16%);
	--kr-image-outline: inset 0 0 0 1px rgb(0 0 0 / 8%);

	/* layout */
	--kr-container: 1400px;
	--kr-gutter: clamp(16px, 3vw, 40px);
	--kr-section-y: clamp(80px, 11vw, 176px);
	--kr-header-h: 76px;
	--kr-announce-h: 36px;

	/* motion — strong curves, UI stays under 300 ms, marketing may run longer */
	--kr-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--kr-ease-io: cubic-bezier(0.77, 0, 0.175, 1);
	--kr-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
	--kr-ease-icon: cubic-bezier(0.2, 0, 0, 1);
	--kr-t-press: 140ms;
	--kr-t-hover: 180ms;
	--kr-t-ui: 240ms;
	--kr-t-panel: 300ms;

	/* layers (baseline) */
	--kr-z-header: 20;
	--kr-z-overlay: 30;
	--kr-z-drawer: 40;
	--kr-z-toast: 50;
}