@layer reset, base, tokens, components, layout, utilities;

/* ============================================================
   SALAFORMA — vars.364a.css
   Tokens: color, spacing, radius, shadow, motion, breakpoints.
   ============================================================ */

@layer tokens {
	:root {
		/* -- color: neutrals -- */
		--c-black: #0A0A0B;
		--c-ink: #111113;
		--c-panel: #1C1C1F;
		--c-panel-2: #232326;
		--c-line-dark: #313134;
		--c-white: #F6F5F2;
		--c-paper: #FAF9F6;
		--c-paper-2: #F1F0EC;
		--c-grey-100: #E7E6E1;
		--c-grey-300: #C7C5BE;
		--c-grey-500: #8D8B84;
		--c-grey-700: #504E49;
		--c-grey-900: #26251F;

		/* -- color: accent (unico) -- */
		--c-accent: #993399;
		--c-accent-strong: #7A2B7A;
		--c-accent-soft: #B563B5;
		--c-accent-glow: rgba(153, 51, 153, .38);
		--c-accent-glow-soft: rgba(153, 51, 153, .16);
		--c-olive-hint: #CCCC33;

		/* -- reservado / no usado en esta version -- */
		--c-accent-dim: #5E2C5E;

		/* -- tipografia -- */
		--ff-display: "Unbounded", "Arial Narrow", sans-serif;
		--ff-text: "Manrope", "Segoe UI", Arial, sans-serif;

		/* -- espaciado (ritmo irregular a proposito) -- */
		--sp-1: 4px;
		--sp-2: 8px;
		--sp-3: 14px;
		--sp-4: 20px;
		--sp-5: 28px;
		--sp-6: 40px;
		--sp-7: 56px;
		--sp-8: 72px;
		--sp-9: 104px;
		--sp-10: 136px;

		/* -- contenedor -- */
		--w-container: 1220px;
		--w-container-wide: 1440px;
		--w-container-narrow: 760px;

		/* -- forma -- */
		--r-sm: 2px;
		--r-md: 6px;
		--r-lg: 18px;
		--r-pill: 999px;

		/* -- sombra / brillo -- */
		--shadow-card: 0 18px 40px -24px rgba(10, 10, 11, .45);
		--shadow-lift: 0 26px 60px -20px rgba(10, 10, 11, .55);

		/* -- movimiento -- */
		--ease-out: cubic-bezier(.16, 1, .3, 1);
		--dur-fast: 160ms;
		--dur-med: 340ms;
		--dur-slow: 620ms;

		/* -- capas -- */
		--z-nav: 100;
		--z-menu: 200;
		--z-consent: 150;
		--z-modal: 300;
	}
}