/* Ruta: wp-content/themes/storefront-moldesintermextienda/assets/css/layout.css
   Responsabilidad: Variables CSS globales, layout base (full-bleed wrappers). */

:root{
  /* ============= PALETA ARTESANAL (CACAO) ============= */
  /* Defaults: se pueden sobreescribir por Customizer */
  --mi-primary: #4A2C1F;       /* Chocolate oscuro */
  --mi-secondary: #8B5A3C;     /* Cacao medio */
  --mi-accent: #C89B3C;        /* Dorado CTA */
  --mi-bg: #FAF7F2;            /* Fondo principal */
  --mi-bg-soft: #EFE6D8;       /* Fondo suave */
  --mi-text: #1e1e1e;          /* Texto base */

  /* ============= PALETA DERIVADA (CHOCOLATE) ============= */
  --choco-900: #2a140e;        /* Más oscuro */
  --choco-800: #3a1d14;        /* Oscuro */
  --choco-700: #4a2418;        /* Medio oscuro */
  --choco-600: #5a2d1d;        /* Medio */

  /* ============= NEUTRALES Y ACENTOS ============= */
  --cream-50: #fbf7f2;         /* Crema muy clara */
  --cream-100: #f1e7db;        /* Crema clara */
  --gold-500: #c89b3c;         /* Oro (alias de --mi-accent) */
  --text-inv: #f5efe9;         /* Texto invertido (light) */
  --muted: #6c6c6c;            /* Gris mutado */

  /* ============= DISEÑO ============= */
  --radius: 10px;              /* Border radius estándar */
  --shadow: 0 10px 30px rgba(0, 0, 0, .18); /* Sombra estándar */

  /* ============= ESPACIADO ============= */
  --smi-gutter: 16px;          /* Margen lateral del sitio */
}

/**
 * Contenedor interno estándar del theme
 * Similar a .container, pero acoplado a Storefront.
 */
.smi-container{
  width: min(1100px, calc(100vw - (var(--smi-gutter) * 2)));
  margin-inline: auto;
}

/**
 * Wrapper full-bleed:
 * - Hace que el background se extienda a toda la pantalla.
 * - El contenido interior lo controlas con .smi-container.
 */
.smi-fullbleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* En móviles, da un poco más de aire */
@media (max-width: 520px){
  :root{ --smi-gutter: 12px; }
}