/* ============================================================
   ASESORÍA RATÓN — DESIGN TOKENS
   Paleta: Atlántico Gallego
   ============================================================ */

:root {
	/* — Color — */
	--color-primary:        #7A1F2B;
	--color-primary-deep:   #5A1620;
	--color-primary-soft:   #9A3744;

	--color-secondary:      #1F3D33;
	--color-secondary-deep: #142A23;
	--color-secondary-soft: #2F5848;

	--color-accent:         #D4B886;
	--color-accent-soft:    #E5D1A8;
	--color-accent-deep:    #B89858;

	--color-bg:             #F0EBE0;
	--color-bg-deep:        #E5DECC;
	--color-bg-paper:       #F8F4EC;
	--color-bg-inverse:     #1F3D33;

	--color-fg:             #1A1A18;
	--color-fg-soft:        #4A4A48;
	--color-fg-mute:        #6F6E68;
	--color-fg-inverse:     #F0EBE0;

	--color-line:           rgba(31, 61, 51, 0.16);
	--color-line-strong:    rgba(31, 61, 51, 0.4);
	--color-line-inverse:   rgba(240, 235, 224, 0.18);

	/* — Tipografía — */
	--font-display:         'Fraunces', 'Cormorant Garamond', Georgia, serif;
	--font-body:            'Source Sans 3', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Escala fluid con clamp() */
	--fs-12:  0.75rem;
	--fs-14:  0.875rem;
	--fs-16:  1rem;
	--fs-18:  clamp(1rem, 0.5vw + 0.85rem, 1.125rem);
	--fs-22:  clamp(1.125rem, 0.7vw + 0.95rem, 1.375rem);
	--fs-28:  clamp(1.35rem, 1vw + 1.05rem, 1.75rem);
	--fs-40:  clamp(1.8rem, 2vw + 1.2rem, 2.625rem);
	--fs-64:  clamp(2.4rem, 4vw + 1rem, 4rem);
	--fs-96:  clamp(3.2rem, 7vw + 1rem, 6rem);
	--fs-144: clamp(4.5rem, 11vw + 1rem, 9.5rem);
	--fs-200: clamp(6rem, 18vw + 1rem, 14rem);

	/* Tracking */
	--tracking-tight:  -0.012em;
	--tracking-normal: 0;
	--tracking-wide:   0.06em;
	--tracking-mega:   0.18em;

	/* Line heights */
	--lh-display: 0.98;
	--lh-tight:   1.12;
	--lh-snug:    1.35;
	--lh-normal:  1.6;
	--lh-loose:   1.75;

	/* — Espaciado — */
	--s-1:  0.25rem;
	--s-2:  0.5rem;
	--s-3:  0.75rem;
	--s-4:  1rem;
	--s-5:  1.5rem;
	--s-6:  2rem;
	--s-7:  3rem;
	--s-8:  4rem;
	--s-9:  6rem;
	--s-10: 8rem;
	--s-11: 10rem;
	--s-12: 12rem;

	/* — Layout — */
	--container:        1280px;
	--container-narrow: 880px;
	--container-wide:   1480px;
	--gutter:           clamp(1.25rem, 4vw, 3rem);

	/* — Radius — */
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 10px;
	--radius-pill: 999px;

	/* — Shadows — */
	--shadow-sm: 0 1px 2px rgba(20, 42, 35, 0.06);
	--shadow-md: 0 8px 24px rgba(20, 42, 35, 0.08);
	--shadow-lg: 0 24px 80px rgba(20, 42, 35, 0.16);

	/* — Motion — */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
	--t-xfast: 120ms var(--ease-out);
	--t-fast:  220ms var(--ease-out);
	--t-mid:   420ms var(--ease-out);
	--t-slow:  760ms var(--ease-out);
	--t-xslow: 1200ms var(--ease-out);

	/* — z-index — */
	--z-base:   1;
	--z-sticky: 50;
	--z-fab:    80;
	--z-drawer: 100;
	--z-modal:  200;
}

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