/* =========================================================
   PrzelicznikWag — base.css
   Reset, typografia, tokeny CSS, layout.
   ========================================================= */

:root {
	--c-primary:       #2563EB;
	--c-primary-dark:  #1E40AF;
	--c-primary-soft:  #DBEAFE;
	--c-primary-xsoft: #EFF6FF;
	--c-accent:        #38BDF8;
	--c-accent-soft:   #E0F2FE;

	--c-earth:         #475569;
	--c-sand:          #F1F5F9;
	--c-paper:         #FFFFFF;
	--c-ink:           #0F172A;
	--c-muted:         #64748B;
	--c-line:          #E2E8F0;
	--c-line-soft:     #F1F5F9;
	--c-success:       #16A34A;
	--c-success-soft:  #DCFCE7;
	--c-error:         #DC2626;
	--c-error-soft:    #FEE2E2;

	--c-surface:       #F8FAFC;
	--c-surface-blue:  #F0F7FF;

	--font-sans:  'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-serif: 'Source Serif Pro', Georgia, serif;
	--font-mono:  ui-monospace, SFMono-Regular, Menlo, monospace;

	--fs-xs:  0.8125rem;
	--fs-sm:  0.9375rem;
	--fs-md:  1.0625rem;
	--fs-lg:  1.25rem;
	--fs-xl:  1.5rem;
	--fs-2xl: 2rem;
	--fs-3xl: 2.5rem;
	--fs-4xl: 3.25rem;

	--lh-tight:  1.15;
	--lh-normal: 1.55;
	--lh-loose:  1.75;

	--sp-1: 0.375rem;
	--sp-2: 0.75rem;
	--sp-3: 1.125rem;
	--sp-4: 1.5rem;
	--sp-5: 2.25rem;
	--sp-6: 3rem;
	--sp-7: 4.5rem;
	--sp-8: 6rem;

	--rad-sm: 6px;
	--rad-md: 10px;
	--rad-lg: 16px;
	--rad-xl: 24px;
	--rad-pill: 999px;

	--shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.04);
	--shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
	--shadow-md:  0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
	--shadow-lg:  0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.05);
	--shadow-blue: 0 4px 14px rgba(37, 99, 235, 0.15), 0 2px 4px rgba(37, 99, 235, 0.08);

	--container: 1200px;
	--container-narrow: 760px;

	--t-fast: 150ms ease;
	--t-base: 220ms ease;
	--t-slow: 350ms ease;
}

* { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-sans);
	font-size: var(--fs-md);
	line-height: var(--lh-normal);
	color: var(--c-ink);
	background: var(--c-paper);
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-sans);
	font-weight: 700;
	line-height: var(--lh-tight);
	color: var(--c-ink);
	margin: 0 0 var(--sp-3);
}

h1 { font-size: var(--fs-3xl); letter-spacing: -0.025em; }
h2 { font-size: var(--fs-2xl); letter-spacing: -0.02em; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--sp-3); }

a {
	color: var(--c-primary);
	text-decoration: none;
	transition: color var(--t-fast);
}

a:hover { color: var(--c-primary-dark); }

img, svg { max-width: 100%; height: auto; display: block; }

::selection { background: var(--c-primary-soft); color: var(--c-ink); }

.container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--sp-3);
}

.container-narrow {
	max-width: var(--container-narrow);
	margin-inline: auto;
	padding-inline: var(--sp-3);
}

@media (min-width: 768px) {
	.container, .container-narrow { padding-inline: var(--sp-4); }
	h1 { font-size: var(--fs-4xl); }
	h2 { font-size: var(--fs-3xl); }
}