/* Verba — design tokens (źródło prawdy: design_handoff/reference/shared.css) */

:root {
	/* === Paleta === */
	--green-deep: #2f4a36;
	--green-mid:  #3a5a45;
	--green-soft: #5a7a64;
	--green-line: #c8d4ca;
	--cream:      #f3ecdb;
	--cream-soft: #ffffff;
	--cream-deep: #ede4d1;
	--paper:      #ffffff;
	--white:      #ffffff;
	--brown:      #7a4f2a;
	--brown-soft: #a06b3a;
	--ink:        #1f2a22;
	--muted:      #6b6b63;
	--text-soft:  #3a3a32;

	/* === Cienie === */
	--shadow-sticky: 0 4px 20px rgba(31, 42, 34, 0.05);
	--shadow-soft:   0 4px 30px rgba(31, 42, 34, 0.06);

	/* === Typografia === */
	--font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-mono:  'DM Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

	/* Skala (clamp = mobile-first responsywnie bez media queries) */
	--fs-h1:        clamp(48px, 7vw, 96px);
	--fs-h2-lg:     clamp(40px, 5.2vw, 64px);
	--fs-h2-md:     clamp(34px, 4.4vw, 56px);
	--fs-h2-sm:     clamp(30px, 3.8vw, 48px);
	--fs-h3:        clamp(24px, 2.4vw, 32px);
	--fs-h3-sm:     clamp(22px, 2.2vw, 30px);
	--fs-pull:      clamp(22px, 2.4vw, 28px);
	--fs-card-q:    19px;
	--fs-body:      17px;
	--fs-body-lg:   18px;
	--fs-body-sm:   16px;
	--fs-meta:      13px;
	--fs-eyebrow:   11px;
	--fs-eyebrow-s: 10px;

	/* Line-heights */
	--lh-h1:    1.02;
	--lh-h2:    1.1;
	--lh-h2-md: 1.15;
	--lh-prose: 1.75;
	--lh-body:  1.65;

	/* Letter-spacing */
	--ls-eyebrow:   0.22em;
	--ls-label:     0.18em;
	--ls-meta:      0.16em;
	--ls-cta:       0.04em;
	--ls-tight:     -0.01em;
	--ls-mono-num:  0.04em;

	/* === Spacing === */
	--space-section-y:  clamp(72px, 10vw, 120px);
	--space-section-x:  clamp(24px, 5vw, 72px);
	--space-section-top-hero: clamp(56px, 7vw, 80px);
	--gap-grid-lg:      clamp(40px, 6vw, 80px);
	--gap-grid-md:      clamp(32px, 4vw, 56px);
	--gap-card:         28px;

	/* === Geometry === */
	--radius-pill: 999px;
	--radius-flat: 0;
	--border-soft: 1px solid rgba(47, 74, 54, 0.10);
	--border-mid:  1px solid rgba(47, 74, 54, 0.12);
	--border-form: 1px solid rgba(47, 74, 54, 0.25);

	/* === Breakpointy (do użycia w mediach: nie czyta się ich CSS-owo,
	   trzymamy tu jako referencja dla deweloperów) === */
	--bp-sm: 640px;
	--bp-md: 768px;
	--bp-lg: 1024px;
	--bp-xl: 1280px;

	/* Kontener — max szerokość treści */
	--container-max: 1440px;

	/* Header — wysokość sticky (potrzebne dla offset scrolla) */
	--header-h: 96px;
}