/* ============================================================
   Soleo — Design Tokens (CSS custom properties)
   Źródło prawdy: D:/laragon/www/soleo-dev/src/scss/abstracts/_tokens.scss
   Kolory + fontSizes + spacing są też w theme.json (presets) — tu są
   tokeny dla rzeczy których theme.json nie obsługuje (line-heights,
   radii, shadows, motion, container, decorative).
   ============================================================ */

@layer reset, base, layout, components, sections, utilities;

:root {
	/* === Brand colors (duplikat z theme.json — używane przez CSS components/sections) === */
	--color-brand-blue:        #0052b4;
	--color-brand-blue-dark:   #003e8a;
	--color-brand-blue-mid:    #2d63ab;
	--color-brand-blue-light:  #a7daef;
	--color-brand-green:       #198f37;
	--color-brand-green-dark:  #147230;
	--color-brand-green-darker:#0e5524;
	--color-brand-red:         #ce132e;
	--color-brand-red-dark:    #a40f25;
	--color-brand-red-alt:     #d2172d;
	--color-brand-yellow:      #e7b522;
	--color-brand-orange:      #f39a1f;

	/* Neutrale */
	--color-ink:        #000000;
	--color-text:       #443f3f;
	--color-text-muted: #8a92a0;
	--color-surface:    #ffffff;
	--color-surface-alt:#f7f8fa;
	--color-border:     #e5e7ec;

	/* === Typografia === */
	--font-display: "Luckiest Guy", system-ui, sans-serif;
	--font-body:    "Montserrat", system-ui, sans-serif;

	/* Fluid font sizes (Utopia formula, 375→1920 range) */
	--fs-h1:    clamp(2.75rem, 1.90rem + 3.63vw, 6.25rem);
	--fs-h2:    clamp(2.625rem, 1.75rem + 3.75vw, 6.25rem);
	--fs-h3:    clamp(1.5rem, 1.32rem + 0.78vw, 2.25rem);
	--fs-h4:    1.25rem;
	--fs-lead:  clamp(1.125rem, 1.03rem + 0.39vw, 1.5rem);
	--fs-text:  clamp(1.125rem, 1.03rem + 0.39vw, 1.5rem);
	--fs-body:  1rem;
	--fs-small: 1rem;
	--fs-tiny:  0.875rem;

	/* Line-heights */
	--lh-tight:   1.05;
	--lh-display: 1.3;
	--lh-normal:  1.4;
	--lh-relaxed: 1.6;

	/* Font weights */
	--fw-regular:   400;
	--fw-medium:    500;
	--fw-semibold:  600;
	--fw-bold:      700;
	--fw-extrabold: 800;

	/* === Spacing === */
	--space-2xs: 0.25rem;
	--space-xs:  0.5rem;
	--space-sm:  0.75rem;
	--space-md:  1rem;
	--space-lg:  1.5rem;
	--space-xl:  2rem;
	--space-2xl: 3rem;
	--space-3xl: 4rem;
	--space-4xl: 6rem;
	--space-5xl: 8rem;

	/* === Radius === */
	--radius-sm:   0.25rem;
	--radius-md:   0.5rem;
	--radius-lg:   1rem;
	--radius-xl:   1.5rem;
	--radius-pill: 999rem;

	/* === Container (fluid 375→1280, Utopia) === */
	--container-max:  75rem;
	--container-wide: 110rem;
	--container-pad:  clamp(1.25rem, -1.13rem + 10.17vw, 7rem);
	--section-pad-y:  clamp(3rem, 1.14rem + 7.96vw, 7.5rem);

	/* === Shadows === */
	--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
	--shadow-md: 0 4px 12px rgb(0 0 0 / 0.08);
	--shadow-lg: 0 12px 32px rgb(0 0 0 / 0.12);

	/* === Motion === */
	--ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
	--duration-fast: 150ms;
	--duration-base: 250ms;
}