/* ==========================================================================
   TDM Theme — Bloques Nativos Gutenberg (Manifest / Orquestador Modular)
   NOTA: @import DEBE ir estrictamente al inicio del archivo según la especificación CSS.
   ========================================================================== */

/* 1. Tipografías Google Fonts de Alta Gama */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,400&display=swap");

/* 2. Módulos CSS */
@import url("./cycle-cards.css");
@import url("./blocks/swiper-base.css");
@import url("./blocks/hero-banner.css");
@import url("./blocks/category-grid.css");
@import url("./blocks/catalog-grid.css");
@import url("./blocks/promo-banner.css");
@import url("./blocks/value-props.css");
@import url("./blocks/interactive-slider.css");
@import url("./blocks/catalog-view.css");
@import url("./blocks/product-detail.css");
@import url("./blocks/spotlight-product.css");

/* 3. Tokens y Variables Base del Design System (Disponibles en Frontend y Editor) */
:root,
.editor-styles-wrapper {
  /* Colors */
  --color-noir: #000000;
  --color-white: #ffffff;
  --color-alabaster: #f7f7f7;
  --color-carbon: #1d1d1d;
  --color-muted: #666666;
  --color-border: #e5e5e5;
  --color-sale: #d92d20;
  --color-gold-accent: #d4af37;

  /* Typography */
  --font-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --font-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Block tokens */
  --tdm-block-radius: 4px;
  --tdm-touch-target: 48px;
  --tdm-transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   4. Canvas del Editor Full-Width y Adaptable (Sin tope artificial de 840px)
   ========================================================================== */
.editor-styles-wrapper .is-root-container {
  max-width: 100% !important;
  width: 100% !important;
  /* padding-left: 0 !important; */
  /* padding-right: 0 !important; */
}

.editor-styles-wrapper .is-root-container > .wp-block,
.editor-styles-wrapper .wp-block {
  max-width: 100% !important;
  width: 100% !important;
  /* margin-left: 0 !important; */
  /* margin-right: 0 !important; */
  /* margin-top: 0 !important; */
  /* margin-bottom: 0 !important; */
}