/* Tiendas — variables del sistema de diseño (ver DESIGN.md). Fuente única de colores, fuentes,
   radios y medidas para la tienda y el panel. Nada se pone a mano fuera de aquí. */
:root {
	/* Color */
	--t-brand: #1F3A68;
	--t-brand-ink: #1F3A68;
	--t-brand-soft: #EAF0F8;
	--t-ink: #18181B;
	--t-muted: #66666E;
	--t-line: #E7E7E4;
	--t-soft: #F6F6F4;
	--t-bg: #FFFFFF;
	--t-ok: #15803D;
	--t-ok-soft: #E8F5EC;
	--t-danger: #B42318;
	--t-danger-soft: #FDECEA;
	--t-warn: #9A5B00;        /* una advertencia que hay que leer (un precio cambió); no es un error */
	--t-warn-soft: #FFF4DD;
	--t-wa: #128C3E;
	--t-overlay: rgba(24, 24, 27, .4);

	/* Tipografía */
	--t-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
	--t-font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--t-size-title: 28px;
	--t-size-group: 15px;
	--t-size-body: 15px;
	--t-size-small: 13px;
	--t-size-nav: 11.5px;

	/* Papeles de texto (DESIGN.md, "Tipografía"): todo texto es uno de estos cuatro. */
	--t-type-display: 28px;   /* identidad: una vez por pantalla */
	--t-type-content: 16px;   /* lo que se lee */
	--t-type-meta: 13px;      /* lo que acompaña */
	--t-type-control: 16px;   /* lo que se toca */
	--t-type-nav: 12px;       /* los nombres de la navegación inferior */
	/* Solo en el panel, que es más denso: */
	--t-type-note: 14px;      /* la línea que acompaña al título de una fila o de una región */
	--t-type-figure: 22px;    /* una cifra (por entregar, ventas del mes) */

	/* Forma */
	--t-r-card: 20px;
	--t-r-ctl: 14px;
	--t-r-img: 16px;
	--t-r-thumb: 12px;
	--t-r-pill: 999px;
	--t-border: 1px solid var(--t-line);
	--t-float-shadow: 0 2px 8px rgba(24, 24, 27, .12);

	/* Movimiento: corto y siempre igual. Solo para explicar un cambio de la pantalla (algo que
	   aparece, se va, se abre o se cierra); nada se mueve para adornar. public/js/panel/ui.js
	   los lee de aquí. */
	--t-motion-fast: 140ms;   /* un detalle: la flecha de una fila que se abre */
	--t-motion-base: 200ms;   /* contenido que entra, sale, se abre o se cierra */
	--t-ease: cubic-bezier(.2, 0, 0, 1);

	/* Medidas */
	--t-touch: 44px;
	--t-btn-h: 52px;
	--t-gutter: 20px;
	--t-gap: 8px;
	--t-gap-card: 12px;

	/* El lienzo de app: la tienda nunca es más ancha que esto, tampoco en una computadora. */
	--t-canvas: 460px;
	--t-canvas-panel: 620px;
	--t-nav-h: 64px;          /* alto de la navegación inferior, sin el área segura */
	--t-avatar: 76px;         /* el logo del comercio montado sobre su portada */
	--t-thumb: 72px;          /* la foto pequeña de un renglón (carrito) */

	/* Escala de espacio: dentro de un grupo, poco; entre grupos, 24; entre secciones, 40. */
	--t-space-4: 4px;
	--t-space-8: 8px;
	--t-space-12: 12px;
	--t-space-16: 16px;
	--t-space-24: 24px;
	--t-space-40: 40px;
}