/* =============================================================================
 * dm-tokens.css - Tokens del design system de DeliMart.
 *
 * Generado desde el proyecto "DeliMart - Design System" de claude.ai/design
 * (4851c611-514f-4eed-a80f-43e5e466de41). NO editar a mano: si hay que cambiar
 * un valor, se cambia en el design system y se vuelve a bajar.
 *
 * Se carga ANTES de site.css / site-mobile.css. Convive con Bootstrap 4.5.1.
 * ============================================================================= */

/* ---------- tokens.css ---------- */
/*
 * Tokens de DeliMart.
 *
 * Los valores salen del tema real (wwwroot/themes/DeliMartShoppping/css/).
 * Las variables --*Web mantienen el nombre que ya usa el tema en
 * lib/multi-dropdown-menu/css/bootstrap-4-navbar.css, para que un dev pueda
 * buscar el mismo nombre en los dos lados. Las --dm-* son la capa nueva.
 */

:root {
  /* ---- Paleta original del tema (nombres tal cual existen hoy) ---- */
  --whiteWeb: #fff;
  --obscureWeb: #231f20;
  --orangeWeb: #f26200;
  --darkOrangeWeb: #f23806;
  --redWeb: #ea1c00;
  --veryLightOrange: #f58634;
  --lightGrey: #bdbbbc;

  /* ---- Marca ---- */
  /* #f58634 es el naranja dominante: botones, precios, acentos, badges. */
  --dm-brand: #f58634;
  --dm-brand-strong: #f26200;
  --dm-brand-darker: #f23806;
  --dm-brand-soft: #fff6e3; /* fondo del precio en la card de producto */
  --dm-danger: #ea1c00;
  --dm-danger-alt: #ff1717;
  --dm-warning: #ff9601; /* badge de % de descuento */

  /* ---- Texto ---- */
  --dm-text: #353536;
  --dm-text-strong: #1c1b1b;
  --dm-text-heading: #232323;
  --dm-text-muted: #747575;
  --dm-text-faint: #a2a2a2;
  --dm-text-on-brand: #fff;
  --dm-text-inverse-muted: #808080e5;

  /* ---- Superficies ---- */
  --dm-surface: #fff;
  --dm-surface-alt: #f5f5f5;
  --dm-surface-sunken: #ebebeb;
  --dm-surface-footer: #232323;

  /* ---- Bordes ---- */
  --dm-border: #ebebeb;
  --dm-border-strong: #dee2e6;
  --dm-border-input: #ced4da;
  --dm-border-track: #e1e1e1;

  /* ---- Sombras ----
   * #aaa9a9e5 es el color de sombra dominante del tema y no estaba en :root.
   * --dm-shadow es la elevación estándar: `0px 3px 6px #aaa9a9e5` aparece
   * unas 22 veces (botones, cards, headers). */
  --dm-shadow-color: #aaa9a9e5;
  --dm-shadow-sm: 0 2px 4px var(--dm-shadow-color);
  --dm-shadow: 0 3px 6px var(--dm-shadow-color);
  --dm-shadow-md: 0 10px 10px rgb(3 19 23 / 20%);
  --dm-shadow-lg: 0 10px 40px rgb(3 19 23 / 20%);
  --dm-shadow-card: 0 5px 15px rgb(0 0 0 / 15%);
  --dm-shadow-panel: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  --dm-shadow-ambient: 0 0 10px var(--dm-shadow-color);
  --dm-shadow-header: 0 2px 6px #aaa;

  /* ---- Radios ----
   * El tema tiene dos radios base: 6px para controles (botones, inputs de
   * checkout, acordeones) y 1rem para cards y CTAs grandes. */
  --dm-radius-sm: 6px; /* controles */
  --dm-radius: 0.5rem;
  --dm-radius-card: 1rem; /* cards, paneles, modales */
  --dm-radius-cta: 1rem; /* .btn-outline, .btn-checkout, .btn-coupon */
  --dm-radius-product: 8px; /* .product-list .card */
  --dm-radius-pill: 5rem; /* buscador */
  --dm-radius-round: 100%;

  /* ---- Tipografía ---- */
  --dm-font: "Montserrat", sans-serif;
  --dm-text-xs: 11px;
  --dm-text-sm: 12px;
  --dm-text-base: 14px;
  --dm-text-md: 16px;
  --dm-text-lg: 20px;
  --dm-text-xl: 22px; /* h1, .page-header, .widget-name */
  --dm-text-2xl: 25px; /* .fs-title del checkout */

  --dm-weight-light: 300;
  --dm-weight-normal: 400;
  --dm-weight-medium: 500; /* peso del body */
  --dm-weight-semibold: 600;
  --dm-weight-bold: 700;

  /* ---- Espaciado ---- */
  --dm-space-1: 0.25rem;
  --dm-space-2: 0.5rem;
  --dm-space-3: 1rem;
  --dm-space-4: 1.5rem;
  --dm-space-5: 2rem;
  --dm-space-6: 3rem;

  /* ---- Movimiento ---- */
  /* El tema usa .7s en casi todas las transiciones de hover. */
  --dm-transition: all 0.7s;
  --dm-transition-fast: all 0.2s ease;
}