/* Dónde Jugar Listings — Design tokens.
 * Default palette, mirrored from dondejugarboardgames.com.
 * Loaded once (djl-tokens handle) before any page-specific CSS so the
 * tokens are available to every .djl-* stylesheet via var(--djl-*).
 *
 * Admin color overrides are emitted at runtime as a small <style> in
 * wp_head (see DJL_Colors::render_user_overrides) and override these
 * defaults because :root specificity beats nothing.
 */
:root {
	--djl-primary: #1a2a3a;
	--djl-accent:  #d35400;
	--djl-line:    #FF9800;
	--djl-bg:      #f0f2f5;
	--djl-text:    #2c3e50;

	--djl-muted:   #5a6b7b;
	--djl-border:  #e0e6ed;
	--djl-card:    #ffffff;
	--djl-link:    #3498db;

	/* Card typography & color tokens — all admin-editable from Ajustes → Tarjetas */
	--djl-card-title-size:   24px;
	--djl-card-title-weight: 700;
	--djl-card-meta-size:    16px;
	--djl-card-meta-weight:  600;
	--djl-vendor-color:      #2A91FF;
	--djl-price-size:        24px;
	--djl-price-weight:      700;
	--djl-price-color:       #00D540;

	/* Buttons — one shared system (see assets/css/buttons.css). Outline buttons
	 * (Ver detalles, Mi Perfil, Editar, Archivar, Limpiar…) all read
	 * --djl-btn-outline-color; filled buttons (Agregar Juego, Guardar…) read the
	 * fill tokens. The admin "Botones" settings override the outline color +
	 * border via DJL_Colors::render_card_css_overrides(). WhatsApp + danger keep
	 * their semantic colors. */
	--djl-btn-radius:        6px;
	--djl-btn-fill-bg:       var(--djl-primary);
	--djl-btn-fill-text:     #ffffff;
	--djl-btn-fill-bg-hover: #00254a;
	--djl-btn-outline-color: var(--djl-primary);
	--djl-btn-border:        1px;
	--djl-btn-whatsapp:       #25d366;
	--djl-btn-whatsapp-hover: #1ebe5b;
	--djl-btn-danger:         #b3261e;
	--djl-btn-danger-border:  #e0a8a4;

	/* Grid columns — admin-editable (Ajustes → Tarjetas → "Columnas de la
	 * cuadrícula"). Shared by the public board and the seller dashboard grids.
	 * Breakpoints: mobile ≤600px, tablet 601–1024px, desktop ≥1025px. */
	--djl-cols-desktop: 4;
	--djl-cols-tablet:  2;
	--djl-cols-mobile:  1;
}