/**
 * Design tokens. Todo el look del tema sale de estas variables — para
 * retocar el color de marca o el radio de los bordes, alcanza con cambiar
 * acá (o desde Apariencia > Personalizar, que sobreescribe --color-primary,
 * --color-branch-1 y --color-branch-2 vía inc/customizer.php).
 */

:root {
	/* Marca (valores por defecto; el Personalizador los pisa inline en <head>).
	   Turquesa + negro calcados de mundotecmayorista.com.ar (buscador con
	   degradé #40BFD9→#35B5D0, botones en #161616) — antes usábamos el azul
	   de apple.com, pero la idea es que todo el grupo MundoTec se vea como
	   una sola marca. */
	--color-primary: #3AB9D6;
	--color-primary-hover: #2E94AB;
	--color-link: #35B5D0;
	--color-branch-1: #3AB9D6;
	--color-branch-2: #161616;

	/* Superficie y texto — paleta clara, neutra, estilo iOS/macOS */
	--color-bg: #FFFFFF;
	--color-bg-subtle: #F5F5F7;
	--color-bg-elevated: #FFFFFF;
	--color-border: #E5E5EA;
	--color-border-strong: #D2D2D7;

	--color-text: #1D1D1F;
	--color-text-secondary: #6E6E73;
	--color-text-tertiary: #98989D;
	--color-on-primary: #FFFFFF;

	--color-success: #1FAA59;
	--color-success-bg: #E9F9EF;
	--color-danger: #E0393E;
	--color-danger-bg: #FDECEC;
	--color-warning: #C97A00;

	/* Radios: apple.com usa el mismo 18px tanto en tarjetas chicas como
	   grandes (no agranda el radio con el tamaño de la tarjeta) — replicamos
	   ese criterio acá en vez del salto 16px/24px que teníamos. */
	--radius-sm: 10px;
	--radius-md: 18px;
	--radius-lg: 18px;
	--radius-full: 999px;

	/* Sombras suaves, nunca duras */
	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.10);
	--shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.14);

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

	/* Tipografía: fuentes del sistema, cero requests externos */
	--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
		"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Layout */
	--container-width: 1280px;
	--header-height: 56px;
	--announce-height: 34px;
	--tabbar-height: 62px;
	--drawer-width: min(420px, 86vw);

	/* Capas */
	--z-header: 100;
	--z-mega: 90;
	--z-overlay: 200;
	--z-drawer: 210;
	--z-tabbar: 150;

	--ease: cubic-bezier(0.4, 0, 0.2, 1);
}