/* KIDORA — base: design tokens, reset, typography, utilities, buttons */
:root {
	/* Color */
	--color-text: #1c1b1a;
	--color-text-muted: #6d6a66;
	--color-bg: #ffffff;
	--color-bg-alt: #f6f4f1;
	--color-border: #e7e3de;
	--color-border-strong: #cfc9c1;
	--color-accent: #8c6a4a;
	--color-accent-dark: #6f5238;
	--color-sale: #c23b32;
	--color-inverse: #1c1b1a;
	--color-on-inverse: #ffffff;

	/* Spacing */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--gutter: 16px;
	--container: 1360px;

	/* Typography */
	--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--fs-body: 15px;
	--fs-small: 13px;
	--fs-nav: 12.5px;
	--fs-section: clamp(20px, 1.2vw + 16px, 28px);
	--fs-large: clamp(28px, 2.4vw + 18px, 46px);
	--fs-product: 14px;
	--fs-price: 15px;
	--lh-body: 1.6;
	--lh-tight: 1.25;
	--ls-nav: 0.07em;
	--ls-wordmark: 0.28em;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;

	/* Controls */
	--btn-h: 48px;
	--btn-h-sm: 40px;
	--radius: 2px;
	--radius-md: 4px;
	--radius-pill: 999px;

	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(28, 27, 26, 0.06);
	--shadow-md: 0 8px 24px rgba(28, 27, 26, 0.08);
	--shadow-drawer: 0 0 40px rgba(28, 27, 26, 0.18);

	/* Motion */
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--dur-fast: 0.2s;
	--dur: 0.3s;
	--dur-slow: 0.45s;

	/* Layers */
	--z-header: 100;
	--z-mega: 110;
	--z-overlay: 900;
	--z-drawer: 1000;

	/* Header metrics */
	--announcement-h: 36px;
	--header-h-mobile: 56px;
	--header-h-desktop: 76px;
	--nav-h: 46px;
	--bottom-nav-h: 60px;
}

@media (min-width: 768px) {
	:root { --gutter: 24px; }
}
@media (min-width: 1280px) {
	:root { --gutter: 32px; }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
body.has-drawer-open { overflow: hidden; }
img, svg, video { max-width: 100%; height: auto; }
svg { flex-shrink: 0; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }

:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Layout */
.site { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1; padding-block: var(--space-6); min-height: 50vh; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

@media (max-width: 767px) {
	body.has-bottom-nav { padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)); }
}

/* Typography */
.text-small { font-size: var(--fs-small); }
.text-muted { color: var(--color-text-muted); }
.heading-large { font-size: var(--fs-large); line-height: var(--lh-tight); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.heading-section { font-size: var(--fs-section); line-height: var(--lh-tight); font-weight: var(--fw-semibold); letter-spacing: 0.02em; text-transform: uppercase; }
.product-title { font-size: var(--fs-product); line-height: 1.4; font-weight: var(--fw-regular); }
.price { font-size: var(--fs-price); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.price del { color: var(--color-text-muted); font-weight: var(--fw-regular); margin-right: 6px; }
.price ins { color: var(--color-sale); text-decoration: none; }

/* Buttons */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: var(--btn-h); padding: 0 var(--space-6);
	border: 1px solid var(--color-text); border-radius: var(--radius);
	font-size: var(--fs-small); font-weight: var(--fw-medium);
	letter-spacing: 0.1em; text-transform: uppercase;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn--primary { background: var(--color-text); color: #fff; }
.btn--primary:hover { background: transparent; color: var(--color-text); }
.btn--outline { background: transparent; color: var(--color-text); }
.btn--outline:hover { background: var(--color-text); color: #fff; }

/* Utilities */
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
	position: fixed !important; top: 8px; left: 8px; width: auto; height: auto; margin: 0;
	clip: auto; padding: 12px 16px; background: var(--color-text); color: #fff; z-index: 2000;
}

/* Placeholders / footer */
.kidora-placeholder { text-align: center; padding-block: var(--space-9); display: grid; gap: var(--space-4); justify-items: center; }
.entry { margin-bottom: var(--space-7); }
.entry__title a:hover { color: var(--color-accent); }
.site-footer { border-top: 1px solid var(--color-border); padding-block: var(--space-6); text-align: center; font-size: var(--fs-small); color: var(--color-text-muted); }