/*
 * Design tokens — Delihot theme.
 * Fuente de verdad visual: colores extraídos del logotipo oficial (burdeo),
 * resto de la escala definida para el Sprint UX/UI (ver docs del sprint).
 * No contiene selectores de componentes, solo variables.
 */

:root {
	/* Superficie */
	--color-bg-base: #111111;
	--color-bg-deepest: #000000;
	--color-bg-elevated: #1a1a1a;
	--color-bg-elevated-hover: #212121;
	--color-border: #2a2a28;
	--color-border-strong: #3a3a37;

	/* Texto */
	--color-text-primary: #fafaf8;
	--color-text-secondary: #d9d9d6;
	--color-text-tertiary: #9a988f;

	/* Acento de marca (único — botones primarios, enlaces, foco, estados activos) */
	--color-accent: #c9536b;
	--color-accent-hover: #d66c82;
	--color-accent-muted: rgba(201, 83, 107, 0.16);

	/* Reservado para un futuro modo claro — no usado en este sprint */
	--color-accent-on-light: #7a2739;
	--color-text-secondary-on-light: #55534d;
	--color-bg-light: #fafaf8;

	/* Semánticos */
	--color-success: #3dd68c;
	--color-warning: #e8b93e;
	--color-danger: #f0576b;

	/* Badges de plan — identidad propia, nunca el acento de marca */
	--plan-hot-icon-color: #ff9d4d;
	--plan-hot-icon-accent: #d55374;
	--plan-hot-prime-color: #f2b84b;
	--plan-hot-plus-color: #edc85d;
	--plan-hot-start-color: #e4c577;

	/* Alias temporales mientras se retira por completo el naming legacy. */
	--plan-vip-color: var(--plan-hot-icon-color);
	--plan-vip-accent: var(--plan-hot-icon-accent);
	--plan-golden-color: var(--plan-hot-prime-color);
	--plan-platinium-color: var(--plan-hot-plus-color);
	--plan-gold-color: var(--plan-hot-start-color);

	/* Tipografía */
	--font-family-base: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--text-2xs: 0.6875rem;
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.375rem;
	--text-2xl: 1.75rem;
	--text-3xl: 2.25rem;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--line-height-body: 1.5;
	--line-height-heading: 1.2;

	/* Espaciado (escala de 4px) */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;

	/* Radios */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-full: 999px;

	/* Sombra (dark UI: sutil, elevación principal vía luminosidad) */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
	--shadow-focus: 0 0 0 3px var(--color-accent-muted);

	/* Movimiento */
	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--duration-fast: 120ms;
	--duration-base: 200ms;

	/* Breakpoints (referencia — CSS no permite leer variables en @media, ver base.css) */
	--bp-sm: 480px;
	--bp-md: 768px;
	--bp-lg: 1024px;
	--bp-xl: 1280px;

	/* Capas */
	--z-dropdown: 100;
	--z-drawer: 200;
	--z-modal: 300;
	--z-toast: 400;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 0.01ms;
		--duration-base: 0.01ms;
	}
}