/* Design tokens - Kształty Natury
   Paleta i typografia oparta o referencję sklep701799.shoparena.pl */

:root {
	color-scheme: light;
	accent-color: #a8b170;

	/* Kolory bazowe */
	--kn-cream-50: #fbf7f1;
	--kn-cream-100: #f5efe6;
	--kn-cream-200: #efe8db;
	--kn-cream-300: #e8dfd0;
	--kn-sand-400: #d4c4a8;

	/* Akcent oliwka/zieleń */
	--kn-olive-300: #c2cba3;
	--kn-olive-500: #a8b170;
	--kn-olive-600: #8c9559;
	--kn-olive-700: #6e7644;

	/* Akcent burgundy (promocje, sale badge) */
	--kn-burgundy-500: #b54a3a;
	--kn-burgundy-600: #9a3d2f;

	/* Neutralne */
	--kn-ink-900: #1f1d1a;
	--kn-ink-800: #2a2724;
	--kn-ink-700: #4a4641;
	--kn-ink-500: #7a746c;
	--kn-ink-300: #b8b1a5;
	--kn-paper: #ffffff;

	/* Semantyczne */
	--kn-bg: var(--kn-paper);
	--kn-bg-soft: var(--kn-cream-100);
	--kn-bg-section: var(--kn-cream-50);
	--kn-text: var(--kn-ink-800);
	--kn-text-soft: var(--kn-ink-500);
	--kn-accent: var(--kn-olive-500);
	--kn-accent-dark: var(--kn-olive-700);
	--kn-border: var(--kn-cream-300);

	/* Typografia */
	--kn-font-heading: "Jost", system-ui, -apple-system, sans-serif;
	--kn-font-script: "Sacramento", "Brush Script MT", cursive;
	--kn-font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
	--kn-font-body: "Inter", system-ui, -apple-system, sans-serif;

	--kn-fs-xs: 0.75rem;
	--kn-fs-sm: 0.875rem;
	--kn-fs-base: 1rem;
	--kn-fs-md: 1.125rem;
	--kn-fs-lg: 1.5rem;
	--kn-fs-xl: 2.25rem;
	--kn-fs-2xl: 3rem;
	--kn-fs-hero: clamp(2.5rem, 6vw, 5.5rem);
	--kn-fs-script: clamp(2.5rem, 5vw, 4.5rem);

	--kn-fw-thin: 200;
	--kn-fw-light: 300;
	--kn-fw-regular: 400;
	--kn-fw-medium: 500;
	--kn-fw-semibold: 600;

	--kn-lh-tight: 1.15;
	--kn-lh-snug: 1.35;
	--kn-lh-normal: 1.6;

	--kn-tracking-wide: 0.08em;
	--kn-tracking-wider: 0.18em;

	/* Layout */
	--kn-container: 1280px;
	--kn-container-narrow: 1080px;
	--kn-gutter: clamp(1rem, 3vw, 2.5rem);
	--kn-section-py: clamp(3rem, 7vw, 6rem);

	/* Promienie i cienie */
	--kn-radius-sm: 4px;
	--kn-radius-md: 8px;
	--kn-radius-lg: 18px;
	--kn-radius-pill: 999px;
	--kn-shadow-sm: 0 1px 2px rgba(31, 29, 26, .04), 0 1px 3px rgba(31, 29, 26, .06);
	--kn-shadow-md: 0 8px 24px rgba(31, 29, 26, .08);
	--kn-shadow-lg: 0 18px 48px rgba(31, 29, 26, .12);

	/* Przejścia */
	--kn-ease: cubic-bezier(.2, .6, .2, 1);
	--kn-dur: 240ms;
}