/**
 * Design tokens (docs/design.md §4–§6). The only file allowed to contain
 * raw color values; everything else uses these custom properties.
 */

:root {

	/* Color: text */
	--color-text: #1e293b;
	--color-text-muted: #475569;
	--color-text-subtle: #64748b;
	--color-text-inverse: #fff;

	/* Color: surfaces */
	--color-surface: #fff;
	--color-surface-alt: #f8fafc;
	--color-surface-accent: #fdf0f6;
	--color-surface-inverse: #043464;

	/* Color: brand and action */
	--color-brand: #ed1e78; /* Large/decorative only (4.15:1 on white). */
	--color-accent: #d11465; /* Buttons, links, small pink text (5.25:1). */
	--color-accent-hover: #b8105a;
	--color-navy: #043464;
	--color-navy-hover: #022347;
	--color-backdrop: rgb(4 52 100 / 60%); /* navy */

	/* Color: lines and focus */
	--color-border: #e2e8f0;
	--color-border-strong: #64748b; /* Form fields: 3:1 non-text contrast. */
	--color-focus: #045cb4;
	--color-focus-inverse: #f9a8d4;
	--color-accent-inverse: #f9a8d4; /* Pink text on navy (large numbers): 6.89:1. */
	--color-star: #b45309; /* Filled rating stars (amber): 5.0:1 on white. */
	--color-border-inverse: rgb(255 255 255 / 30%); /* Outlines on navy. */
	--color-divider-inverse: rgb(255 255 255 / 15%); /* Divider lines on navy. */

	/* Color: form states */
	--color-error: #b91c1c;
	--color-success: #15803d;

	/* Typography */
	--font-heading: "Engleski Montserrat", "Montserrat", "Helvetica Neue", arial, sans-serif;
	--font-body: "Source Sans 3", "Segoe UI", "Helvetica Neue", arial, sans-serif;

	/* Fluid type scale: 390px → 1440px viewport. */
	--step--1: clamp(0.9375rem, 0.914rem + 0.095vw, 1rem);
	--step-0: clamp(1.0625rem, 1.039rem + 0.095vw, 1.125rem);
	--step-1: clamp(1.25rem, 1.204rem + 0.19vw, 1.375rem);
	--step-2: clamp(1.4375rem, 1.321rem + 0.476vw, 1.75rem);
	--step-3: clamp(1.75rem, 1.564rem + 0.762vw, 2.25rem);
	--step-4: clamp(2.125rem, 1.8rem + 1.333vw, 3rem);
	--step-5: clamp(2.5rem, 2.036rem + 1.905vw, 3.75rem);

	--leading-body: 1.6;
	--leading-heading: 1.2;
	--measure: 72ch;

	/* Spacing (4px base) */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;
	--space-10: 8rem;
	--section-padding: clamp(var(--space-7), 8vw, var(--space-9));

	/* Layout */
	--container: 75rem;
	--gutter: clamp(var(--space-4), 3vw, var(--space-6));

	/* Shape */
	--radius-sm: 6px;
	--radius-button: 8px;
	--radius-card: 12px;
	--radius-media: 16px;
	--radius-pill: 999px;
	--shadow-raised: 0 1px 2px rgb(15 23 42 / 6%), 0 2px 8px rgb(15 23 42 / 6%);

	/* Motion */
	--duration-fast: 150ms;
	--duration-base: 250ms;
	--duration-slow: 700ms; /* Reveal on scroll. */
	--ease: cubic-bezier(0.2, 0, 0, 1);
	--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Even, so the movement is seen. */
	--reveal-distance: 24px;
	--stagger: 80ms;
}