/*
 * tokens.css — design tokens for dobraopieka-2026
 *
 * Brand primary is #C51230 — deep red provided by the owner.
 * Hover (-700) is #A70F29 (~15% darker); brand tint (-100) #FAECEE is reserved
 * for small accent moments only (chips, FAQ open state). Section backgrounds
 * use the neutral cream (--color-surface-tint) so the page never reads pink.
 *
 * Contrast: #C51230 on white sits ~6.7:1 — meets WCAG AA at any text size and
 * AAA for large text. Body copy uses --color-ink-900; brand red is for CTAs,
 * links, eyebrows, and headings only.
 */

:root {
	/* === BRAND === */
	--color-brand-primary:       #C51230;
	--color-brand-primary-700:   #A70F29; /* hover */
	--color-brand-primary-100:   #FAECEE; /* small accent only — NOT for section bg */
	--color-brand-secondary:     #FEAE21; /* warm yellow — bonus button + "Nowa oferta" badge */
	--color-brand-secondary-700: #D8941C;
	--color-brand-secondary-100: #FFF4DB;

	/* === NEUTRALS === */
	--color-ink-900:    #14171A; /* body text — near-black, not pure */
	--color-ink-700:    #3A4148; /* secondary text */
	--color-ink-500:    #6B737B; /* muted, captions */
	--color-ink-300:    #D4D8DD; /* borders, dividers */
	--color-ink-200:    #E8EBEE; /* hairline rules */
	--color-ink-100:    #F4F6F8; /* subtle surface */
	--color-paper:      #FFFFFF;

	/* === SURFACES === */
	--color-surface-tint: #F8F5EE; /* warm cream — primary alt-section bg */
	--color-surface-deep: #1A1D21; /* footer + dark-mode panels */

	/* === SEMANTIC === */
	--color-success: #2A8E5E;
	--color-warning: #C97A14;
	--color-danger:  #B23A3A;
	--color-info:    #2E6FA8;

	/* === FLAG ACCENTS (for /warunki-pracy/) === */
	--color-pl-red: #DC143C;
	--color-de-yellow: #FFCE00;

	/* === TYPOGRAPHY === */
	--font-display: 'Fraunces', 'Source Serif Pro', Georgia, serif;
	--font-body:    'Inter', 'Source Sans 3', -apple-system, system-ui, sans-serif;

	--fs-display-xl: clamp(2.5rem, 5.5vw, 4rem);     /* hero H1 */
	--fs-display-l:  clamp(1.875rem, 3.5vw, 2.5rem); /* section H2 */
	--fs-display-m:  clamp(1.375rem, 2.5vw, 1.75rem);/* card H3 */
	--fs-body-l:     1.25rem;    /* 20px — lede */
	--fs-body-m:     1.125rem;   /* 18px — body */
	--fs-body-s:     1rem;       /* 16px — captions */
	--fs-caption:    0.9375rem;  /* 15px floor */

	--fw-body:    400;
	--fw-strong:  600;
	--fw-display: 500;
	--fw-button:  600;

	--lh-display: 1.15;
	--lh-body:    1.65;
	--lh-tight:   1.4;

	/* === SPACING === */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs:  0.75rem;
	--space-s:   1rem;
	--space-m:   1.5rem;
	--space-l:   2rem;
	--space-xl:  3rem;
	--space-2xl: 4rem;
	--space-3xl: 6rem;
	--space-section: clamp(4rem, 9vw, 7rem);

	/* === RADII === */
	--radius-s:    6px;
	--radius-m:    12px;
	--radius-l:    20px;
	--radius-pill: 999px;

	/* === SHADOWS === */
	--shadow-card:  0 1px 2px rgba(20, 23, 26, .04), 0 2px 8px rgba(20, 23, 26, .04);
	--shadow-hover: 0 2px 4px rgba(20, 23, 26, .05), 0 12px 24px rgba(20, 23, 26, .08);
	--shadow-focus: 0 0 0 3px rgba(197, 18, 48, .25);

	/* === LAYOUT === */
	--container-max:    1200px;
	--container-narrow: 760px;
	--container-wide:   1400px;
	--header-height:    88px;

	/* === MOTION === */
	--ease-out: cubic-bezier(.2, .65, .3, 1);
	--dur-fast: 100ms;
	--dur-base: 180ms;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}