/* Damico — design tokens (single source of truth).
   Coinciden 1:1 con _handoff/wordpress-handoff/DESIGN_TOKENS.md */

:root {
	/* Brand */
	--accent:        #C12922;
	--accent-hover:  #A6231D;
	--gold:          #CC800A;

	/* Neutrals */
	--ink:           #211915;
	--muted:         #5E5E5E;
	--line:          #E7E1E1;
	--paper:         #FFFFFF;
	--bg:            #F0F1F2;
	--bg-soft:       #FBF9F9;
	--bg-tonal:        rgba(157, 159, 160, 0.18);
	--bg-tonal-strong: rgba(157, 159, 160, 0.32);

	/* Semantic */
	--success:       #2D7A4F;
	--warning:       #CC800A;
	--opportunity:   #CC800A;
	--new:           #C12922;

	/* Shadows */
	--shadow-sm:        0 1px  2px rgba(0, 0, 0, 0.05);
	--shadow-md:        0 10px 30px rgba(0, 0, 0, 0.05);
	--shadow-lg:        0 20px 50px -10px rgba(0, 0, 0, 0.25);
	--shadow-card-hover:0 12px 36px -10px rgba(0, 0, 0, 0.18);

	/* Typography scale */
	/* Epilogue es la única fuente del sitio (display + body). Sans-serif fallback
	   para que el FOUT no muestre serif. */
	--font-display: 'Epilogue', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
	--font-body:    'Epilogue', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

	--h1:       clamp(40px, 6vw,   76px);
	--h2:       clamp(28px, 4vw,   40px);
	--h3:       clamp(20px, 2.4vw, 24px);
	--h4:       18px;
	--body-lg:  17px;
	--body:     15px;
	--body-sm:  13px;
	--eyebrow:  12px;
	--caption:  11px;

	/* Spacing scale */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;

	/* Page rhythm */
	--container-max:        1400px;
	--container-pad:        48px;
	--container-pad-mobile: 24px;
	--section-pad-y:        96px;
	--section-pad-y-mobile: 64px;

	/* Radii */
	--r-sm:   4px;
	--r-md:   8px;
	--r-lg:   12px;
	--r-xl:   14px;
	--r-2xl:  16px;
	--r-pill: 999px;

	/* Motion */
	--ease:        cubic-bezier(.2, .7, .2, 1);
	--dur-fast:    150ms;
	--dur:         250ms;
	--dur-slow:    500ms;

	/* Breakpoints (consumibles vía @media en components/pages) */
	--bp-sm: 640px;
	--bp-md: 880px;
	--bp-lg: 1100px;
	--bp-xl: 1280px;

	/* Header altura (para offsets de scroll/sticky) */
	--header-h: 76px;
}

@media (max-width: 880px) {
	:root {
		--container-pad: var(--container-pad-mobile);
		--section-pad-y: var(--section-pad-y-mobile);
		--header-h: 64px;
	}
}