/* ==========================================================================
   Vodnar — design tokens (based on vodnar.cz, adapted for mobile)
   ========================================================================== */
:root {
	/* Palette */
	--c-primary: #0067a5;        /* logo blue, links, headings */
	--c-primary-dark: #135e8e;   /* category bar */
	--c-primary-darker: #0b4a70; /* hover on dark blue */
	--c-primary-light: #eaf0f2;  /* light section background */
	--c-primary-50: #f2f7fb;     /* even lighter background, row hover */
	--c-accent: #f78e1e;         /* orange: "Buy" buttons, stars, accents */
	--c-accent-dark: #d97a10;
	--c-cta: #b85a06;            /* orange for buttons/badges with white text and orange text on white: 4.7:1 */
	--c-cta-hover: #9a4903;
	--c-teal: #25acb4;
	--c-success: #29b246;
	--c-success-text: #1c7f33;   /* green text on white: 5.1:1 */
	--c-danger: #d64545;
	--c-warning: #f5b400;

	--c-text: #1b2430;
	--c-text-muted: #5d6979;
	--c-text-light: #647080;
	--c-border: #d9e1e7;
	--c-border-light: #eef2f5;
	--c-bg: #ffffff;
	--c-bg-soft: #f7f9fb;
	--c-dark: #0f2a3d;           /* footer */
	--c-dark-2: #143a52;

	/* Typography */
	--font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--font-display: 'Oswald', 'Open Sans', Arial, sans-serif;
	--fs-xs: 0.75rem;
	--fs-sm: 0.875rem;
	--fs-base: 1rem;
	--fs-md: 1.125rem;
	--fs-lg: 1.25rem;
	--fs-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
	--fs-2xl: clamp(1.9rem, 1.4rem + 2.5vw, 2.8rem);
	--fs-hero: clamp(2rem, 1.2rem + 4vw, 3.6rem);
	--lh-tight: 1.2;
	--lh-base: 1.6;

	/* Spacing and grid */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-8: 3rem;
	--space-10: 4rem;
	--space-12: 6rem;
	--container: 1240px;
	--gutter: 16px;
	--section-gap: clamp(2.5rem, 2rem + 3vw, 5rem);

	/* Shape */
	--radius-sm: 5px;
	--radius: 8px;
	--radius-lg: 16px;
	--radius-pill: 999px;
	--shadow-sm: 0 1px 2px rgba(15, 42, 61, 0.06), 0 1px 3px rgba(15, 42, 61, 0.08);
	--shadow: 0 4px 14px rgba(15, 42, 61, 0.10);
	--shadow-lg: 0 14px 40px rgba(15, 42, 61, 0.16);
	--focus-ring: 0 0 0 2px #fff, 0 0 0 4px var(--c-primary); /* opaque, visible on light and dark surfaces */

	/* Motion: all transitions use these values */
	--dur-fast: 150ms;
	--dur: 250ms;
	--dur-slow: 450ms;
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Header */
	--header-h: 64px;
	--nav-h: 48px;
	--bottombar-h: 60px;
}

@media (min-width: 768px) {
	:root {
		--gutter: 24px;
		--header-h: 88px;
	}
}