:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-page: #101519;
  --bg-surface: #0f141d;
  --bg-subtle: #11161a;
  --bg-surface-elevated: #1a2130;
  --ambient-blue: var(--bg-surface-elevated);
  --ambient-cyan: var(--bg-subtle);
  --ambient-violet: #392b43;
  --bg-page-treatment:
    radial-gradient(
      ellipse 1180px 760px at -10% -4%,
      color-mix(in srgb, var(--ambient-cyan) 34%, transparent) 0%,
      transparent 75%
    ),
    radial-gradient(
      ellipse 1080px 980px at 108% 53%,
      color-mix(in srgb, var(--ambient-blue) 31%, transparent) 0%,
      transparent 77%
    ),
    radial-gradient(
      ellipse 1280px 760px at 28% 106%,
      color-mix(in srgb, var(--ambient-violet) 29%, transparent) 0%,
      transparent 76%
    ),
    linear-gradient(108deg, rgba(9, 13, 16, 0.2) 0%, transparent 38%, rgba(7, 10, 13, 0.24) 100%),
    var(--bg-page);

  --dark-canvas-top: var(--bg-page);
  --dark-canvas-mid: var(--bg-subtle);
  --dark-canvas-bottom: var(--bg-page);
  --dark-canvas-depth:
    radial-gradient(
      ellipse 1180px 760px at -10% -4%,
      color-mix(in srgb, var(--ambient-cyan) 34%, transparent) 0%,
      transparent 75%
    ),
    radial-gradient(
      ellipse 1080px 980px at 108% 53%,
      color-mix(in srgb, var(--ambient-blue) 31%, transparent) 0%,
      transparent 77%
    ),
    radial-gradient(
      ellipse 1280px 760px at 28% 106%,
      color-mix(in srgb, var(--ambient-violet) 29%, transparent) 0%,
      transparent 76%
    ),
    linear-gradient(108deg, rgba(9, 13, 16, 0.2) 0%, transparent 38%, rgba(7, 10, 13, 0.24) 100%),
    var(--bg-page);
  --dark-canvas-vignette: transparent;
  --dark-canvas-grid: none;
  --canvas-grid: var(--dark-canvas-grid);
  --canvas-grid-size: 42px 42px;
  --canvas-grid-opacity: 0;
  --canvas-vignette: var(--dark-canvas-vignette);
  --canvas-grain: none;
  --dark-canvas-glass-tint:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--color-accent-violet) 14%, transparent) 0%, transparent 30%),
    radial-gradient(circle at 84% 14%, color-mix(in srgb, var(--color-surface-soft) 8%, transparent) 0%, transparent 24%),
    linear-gradient(135deg, rgba(18, 29, 39, 0.62) 0%, rgba(13, 22, 31, 0.56) 45%, rgba(11, 19, 27, 0.5) 100%);
  --dark-canvas-glass-tint-soft:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--color-accent-violet) 10%, transparent) 0%, transparent 32%),
    radial-gradient(circle at 84% 14%, color-mix(in srgb, var(--color-surface-soft) 6%, transparent) 0%, transparent 24%),
    linear-gradient(135deg, rgba(20, 31, 41, 0.52) 0%, rgba(14, 23, 32, 0.46) 45%, rgba(12, 20, 28, 0.4) 100%);

  /* Semantic foundation */
  --color-blanco: #ffffff;
  --color-negro: #edf2ff;
  --color-text-primary: #edf2ff;
  --color-text-secondary: #b8c5db;
  --color-text-muted: #92a3bf;
  --color-surface: var(--bg-surface);
  --color-surface-soft: var(--bg-subtle);
  --color-bg-neutral: var(--bg-page);
  --mg-accent: var(--color-action-primary);
  --mg-accent-strong: var(--color-action-primary);
  --mg-accent-bg: color-mix(in srgb, var(--color-action-primary) 12%, transparent);
  --mg-accent-bg-hover: color-mix(in srgb, var(--color-action-primary) 18%, transparent);
  --mg-accent-border: color-mix(in srgb, var(--color-action-primary) 30%, transparent);
  --color-acento: var(--mg-accent);
  --color-acento-hover: var(--mg-accent-strong);
  --color-accent-soft: color-mix(in srgb, var(--color-accent-violet) 28%, transparent);
  --color-border: #2b3851;
  --color-border-strong: #465575;
  --color-focus: color-mix(in srgb, var(--color-accent-blue) 24%, transparent);
  --color-gris-claro: #a1aec2;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.42);
  --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.42);
  --shadow-md: 0 16px 36px rgba(0, 0, 0, 0.46);
  --shadow-lg: 0 24px 52px rgba(0, 0, 0, 0.52);

  --color-body-bg: var(--bg-page-treatment);
  --liquid-glass-blur-strong: 12px;
  --liquid-glass-blur-medium: 9px;
  --liquid-glass-blur-soft: 7px;
  --liquid-glass-saturate: 146%;
  --liquid-glass-saturate-soft: 136%;

  --surface: var(--color-surface);
  --linea: var(--color-border);
  --texto-sec: var(--color-text-secondary);

  /* Header + navbar */
  --nav-shell-border: rgba(210, 223, 244, 0.2);
  --nav-shell-shadow:
    0 20px 42px rgba(3, 8, 20, 0.28),
    inset 0 1px 0 rgba(235, 244, 255, 0.2),
    inset 0 -1px 0 rgba(4, 8, 18, 0.26),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  --nav-shell-tint: var(--dark-canvas-glass-tint);
  --nav-shell-shine:
    inset 0 1px 0 rgba(235, 244, 255, 0.16),
    inset 0 -1px 0 rgba(8, 13, 25, 0.22);

  --nav-link-color: rgba(214, 227, 247, 0.94);
  --nav-link-hover-color: #ffffff;
  --nav-link-hover-bg: rgba(235, 244, 255, 0.12);
  --nav-link-active-color: #eff4ff;
  --nav-link-active-underline: var(--color-action-primary);

  --dropdown-surface-border: rgba(210, 223, 244, 0.22);
  --mega-menu-border: var(--dropdown-surface-border);
  --dropdown-surface-bg: rgba(8, 14, 26, 0.38);
  --dropdown-surface-shadow:
    0 22px 46px rgba(3, 8, 20, 0.32), inset 0 1px 0 rgba(235, 244, 255, 0.16),
    inset 0 -1px 0 rgba(6, 11, 22, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  --dropdown-surface-tint: var(--dark-canvas-glass-tint);
  --dropdown-surface-shine:
    inset 0 1px 0 rgba(235, 244, 255, 0.14),
    inset 0 -1px 0 rgba(7, 12, 22, 0.24);
  --mega-menu-shadow: var(--dropdown-surface-shadow);
  --mega-menu-tint: var(--dropdown-surface-tint);
  --mega-menu-shine: var(--dropdown-surface-shine);
  --mega-menu-text: #e7eefc;
  --mega-menu-eyebrow: rgba(174, 192, 218, 0.82);
  --mega-menu-title: #ecf3ff;

  --mega-menu-chip-border: rgba(183, 203, 233, 0.4);
  --mega-menu-chip-bg: rgba(10, 17, 32, 0.56);
  --mega-menu-chip-color: rgba(208, 222, 243, 0.94);
  --mega-menu-chip-hover-border: rgba(212, 227, 249, 0.6);
  --mega-menu-chip-hover-bg: rgba(17, 27, 45, 0.68);

  --mega-menu-item-color: rgba(215, 227, 246, 0.94);
  --mega-menu-item-bg: rgba(7, 13, 24, 0.42);
  --mega-menu-item-border: rgba(210, 223, 244, 0.14);
  --mega-menu-item-hover-bg: rgba(232, 242, 255, 0.12);
  --mega-menu-item-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 32px rgba(3, 8, 20, 0.16);
  --mega-menu-item-hover-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 18px 36px rgba(3, 8, 20, 0.22);
  --mega-menu-link-color: rgba(183, 206, 240, 0.94);
  --mega-menu-link-hover: #ffffff;
  --mega-menu-name-color: #edf4ff;
  --mega-menu-count-color: rgba(175, 194, 222, 0.88);
  --mega-menu-empty-border: rgba(173, 194, 224, 0.5);
  --mega-menu-empty-color: rgba(173, 190, 216, 0.88);

  --searchbar-bg: rgba(12, 23, 30, 0.56);
  --searchbar-border: rgba(183, 203, 233, 0.4);
  --searchbar-focus-border: var(--color-action-primary);
  --searchbar-focus-bg: var(--color-surface);
  --searchbar-focus-ring: color-mix(in srgb, var(--color-action-primary) 20%, transparent);
  --searchbar-input-color: #eef4ff;
  --searchbar-placeholder: rgba(177, 194, 219, 0.78);
  --searchbar-btn-hover-bg: rgba(232, 242, 255, 0.12);
  --searchbar-icon-filter: brightness(0) invert(1);

  --nav-toggle-border: rgba(183, 203, 233, 0.4);
  --nav-toggle-bg: rgba(12, 23, 30, 0.56);
  --nav-toggle-bar: #d7e5fb;

  --nav-mobile-shell-border: rgba(210, 223, 244, 0.16);
  --nav-mobile-shell-shadow:
    0 18px 36px rgba(3, 8, 20, 0.18),
    inset 0 1px 0 rgba(235, 244, 255, 0.12),
    inset 0 -1px 0 rgba(4, 8, 18, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  --nav-mobile-shell-tint: var(--dark-canvas-glass-tint-soft);
  --nav-mobile-shell-shine:
    inset 0 1px 0 rgba(235, 244, 255, 0.1),
    inset 0 -1px 0 rgba(8, 13, 25, 0.18);
  --nav-mobile-icon-bg: rgba(255, 255, 255, 0.04);
  --nav-mobile-icon-border: rgba(235, 244, 255, 0.06);
  --nav-mobile-icon-shadow: inset 0 1px 0 rgba(235, 244, 255, 0.06);
  --mobile-menu-bg-liquid: rgba(12, 21, 29, 0.24);
  --mobile-menu-border-liquid: rgba(210, 223, 244, 0.14);
  --mobile-menu-shadow-liquid:
    0 20px 42px rgba(3, 8, 20, 0.18),
    inset 0 1px 0 rgba(235, 244, 255, 0.1);

  --mobile-menu-bg: rgba(8, 17, 23, 0.96);
  --mobile-menu-border-top: rgba(183, 203, 233, 0.34);
  --mobile-submenu-border: rgba(173, 194, 224, 0.42);
  --mobile-submenu-link: rgba(183, 201, 227, 0.9);
  --mobile-submenu-hover-color: #ffffff;
  --mobile-submenu-hover-bg: rgba(232, 242, 255, 0.12);
  --mobile-submenu-link-all: rgba(188, 210, 243, 0.96);

  /* Footer */
  --footer-text: #e7eefc;
  --footer-border: var(--nav-mobile-shell-border);
  --footer-shadow: var(--nav-mobile-shell-shadow);
  --footer-tint:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--bg-subtle) 78%, transparent) 0%,
      color-mix(in srgb, var(--bg-surface) 72%, transparent) 100%
    );
  --footer-shine: var(--nav-mobile-shell-shine);
  --footer-link-hover: #ffffff;
  --footer-heading-color: #eff4ff;
  --footer-nav-link-color: #dce7fb;
  --footer-social-border: rgba(186, 206, 236, 0.42);
  --footer-social-bg: rgba(9, 16, 30, 0.52);
  --footer-social-hover-border: rgba(216, 229, 249, 0.62);
  --footer-social-hover-bg: rgba(17, 27, 45, 0.68);
  --footer-icon-filter: brightness(0) invert(1);
  --footer-copyright-border: rgba(182, 204, 237, 0.24);
  --footer-copyright-color: rgba(195, 211, 236, 0.92);
  --footer-copyright-link: rgba(212, 225, 245, 0.96);

  /* Product cards and listings */
  --card-glass-blur: var(--liquid-glass-blur-medium);
  --card-glass-saturate: 128%;
  --card-glass-border: var(--nav-mobile-shell-border);
  --card-glass-text: #e7eefc;
  --card-glass-shadow: var(--nav-mobile-shell-shadow);
  --card-glass-tint: var(--nav-mobile-shell-tint);
  --card-glass-shine: var(--nav-mobile-shell-shine);
  --card-glass-hover-border: rgba(216, 229, 249, 0.26);
  --card-glass-hover-shadow:
    0 20px 42px rgba(3, 8, 20, 0.2),
    inset 0 1px 0 rgba(235, 244, 255, 0.12),
    inset 0 -1px 0 rgba(8, 13, 25, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  --card-media-bg: rgba(10, 16, 28, 0.88);
  --card-media-shadow:
    0 12px 28px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --card-description-color: rgba(215, 229, 249, 0.9);
  --card-title-color: #ffffff;
  --card-old-price-color: rgba(202, 214, 231, 0.76);
  --card-current-price-color: #f8fbff;
  --card-link-color: rgba(220, 232, 249, 0.92);
  --card-link-hover: #ffffff;
  --card-breakdown-color: rgba(195, 210, 231, 0.84);
  --card-cotizar-color: #92ffd7;

  --pd-card-bg: var(--bg-surface);
  --pd-media-bg: var(--bg-subtle);
  --pd-title-color: #edf2ff;
  --pd-muted-color: #96a6c0;
  --pdp-panel-bg: var(--bg-surface);
  --pdp-qty-border: #415070;
  --pdp-label-color: #d6e0f5;
  --pdp-btn-color: #d6e0f5;
  --pdp-btn-hover-bg: #25324b;
  --pdp-hint-color: #a7b6cf;
  --pdp-table-head: #e5edff;
  --pdp-table-cell: #bcc9df;
  --pack-option-subtitle: #afbdd5;

  --search-suggest-image-bg: #1e2a42;

  /* Services forms */
  --service-panel-border: var(--color-border);
  --service-panel-shadow:
    0 20px 42px rgba(3, 8, 20, 0.28),
    inset 0 1px 0 rgba(235, 244, 255, 0.18),
    inset 0 -1px 0 rgba(4, 8, 18, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  --service-panel-tint: linear-gradient(
    135deg,
    rgba(20, 31, 41, 0.42) 0%,
    rgba(14, 23, 32, 0.36) 45%,
    rgba(12, 20, 28, 0.3) 100%
  );
  --service-panel-shine:
    inset 0 1px 0 rgba(235, 244, 255, 0.14),
    inset 0 -1px 0 rgba(8, 13, 25, 0.2);
  --service-panel-text: var(--color-text-primary);
  --service-heading: var(--color-text-primary);
  --service-subtitle: var(--color-text-secondary);
  --service-info-bg-start: color-mix(in srgb, var(--color-surface-soft) 76%, transparent);
  --service-info-bg-end: color-mix(in srgb, var(--color-surface) 66%, transparent);
  --service-info-border: var(--color-border);
  --service-info-inner-border: color-mix(in srgb, var(--color-border) 42%, transparent);
  --service-info-title: var(--color-text-primary);
  --service-info-text: var(--color-text-secondary);
  --service-help-text: var(--color-text-secondary);
  --service-form-state: var(--color-text-secondary);
  --service-form-label: var(--color-text-primary);
  --service-form-input-border: var(--color-border);
  --service-form-input-bg: var(--color-surface);
  --service-form-input-text: var(--color-text-primary);
  --service-form-placeholder: var(--color-text-muted);
  --service-form-focus-border: var(--color-action-primary);
  --service-form-focus-bg: rgba(8, 16, 30, 0.78);
  --service-form-focus-ring: color-mix(in srgb, var(--color-action-primary) 22%, transparent);
  --service-inline-text: var(--color-text-primary);
  --service-inline-field-bg: var(--color-surface-soft);
  --service-inline-field-bg-hover: var(--color-surface);
  --service-inline-field-border: var(--color-border);
  --service-inline-field-border-focus: var(--color-action-primary);
  --service-inline-field-invalid: #f59e0b;
  --service-inline-tooltip-bg: #211e11;
  --service-inline-tooltip-text: #fcd34d;
  --service-inline-control-text: var(--color-text-primary);
  --service-inline-control-placeholder: var(--color-text-muted);
  --service-inline-select-arrow: var(--color-text-secondary);
  --service-inline-focus-ring: color-mix(in srgb, var(--color-action-primary) 20%, transparent);
  --service-inline-focus-inset: rgba(240, 247, 255, 0.28);
  --service-inline-state: var(--color-text-secondary);
  --service-consent-border: var(--color-border);
  --service-consent-bg: var(--color-surface-soft);
  --service-consent-focus-ring: color-mix(in srgb, var(--color-accent-violet) 25%, transparent);
  --service-consent-label: var(--color-text-secondary);
  --service-block-title: var(--color-text-primary);
  --service-link-muted: var(--color-text-secondary);
  --service-carrier-border: var(--color-border);
  --service-carrier-bg-start: var(--color-surface);
  --service-carrier-bg-end: var(--color-surface-soft);
  --service-carrier-shadow:
    0 14px 32px rgba(2, 7, 20, 0.42),
    inset 0 1px 0 rgba(235, 244, 255, 0.24),
    inset 0 -1px 0 rgba(6, 11, 22, 0.62);
  --service-carrier-hover-shadow:
    0 22px 44px rgba(3, 8, 20, 0.5),
    inset 0 1px 0 rgba(235, 244, 255, 0.28),
    inset 0 -1px 0 rgba(6, 11, 22, 0.66);
  --service-carrier-title: var(--color-text-primary);
  --service-carrier-cta: var(--color-acento);

  /* Shipping cards */
  --shipping-card-border: rgba(184, 206, 240, 0.3);
  --shipping-card-bg-accent: rgba(120, 165, 246, 0.1);
  --shipping-card-bg: linear-gradient(135deg, rgba(7, 13, 25, 0.72) 0%, rgba(12, 20, 35, 0.64) 100%);
  --shipping-card-shadow:
    0 18px 38px rgba(2, 7, 20, 0.42),
    inset 0 1px 0 rgba(235, 244, 255, 0.24),
    inset 0 -1px 0 rgba(6, 11, 22, 0.58);
  --shipping-card-text: #eaf2ff;
  --shipping-kicker-color: rgba(184, 208, 242, 0.9);
  --shipping-title-color: #f7fbff;
  --shipping-tagline-color: rgba(206, 223, 245, 0.94);
  --shipping-lead-color: rgba(187, 206, 232, 0.86);
  --shipping-section-title-color: #f6fbff;
  --shipping-section-text-color: rgba(193, 211, 236, 0.86);
  --shipping-map-wrap-border: rgba(182, 204, 238, 0.26);
  --shipping-map-wrap-glow: rgba(114, 136, 194, 0.2);
  --shipping-map-wrap-bg: color-mix(in srgb, var(--color-surface-soft) 64%, transparent);
  --shipping-map-footnote: rgba(182, 202, 234, 0.86);
  --shipping-province-fill: rgba(95, 115, 168, 0.52);
  --shipping-province-stroke: rgba(229, 239, 255, 0.34);
  --shipping-province-hover-stroke: rgba(247, 251, 255, 0.96);
  --shipping-tooltip-border: rgba(168, 197, 241, 0.4);
  --shipping-tooltip-bg: linear-gradient(135deg, rgba(10, 17, 33, 0.95) 0%, rgba(16, 27, 48, 0.92) 100%);
  --shipping-tooltip-shadow: 0 18px 30px rgba(2, 8, 19, 0.55);
  --shipping-tooltip-title: #f4f9ff;
  --shipping-tooltip-subtitle: rgba(182, 202, 234, 0.88);
  --shipping-stepper-item-border: rgba(175, 198, 233, 0.24);
  --shipping-stepper-item-bg: rgba(10, 18, 34, 0.58);
  --shipping-stepper-index-bg: linear-gradient(135deg, rgba(123, 47, 247, 0.88) 0%, rgba(47, 128, 237, 0.86) 100%);
  --shipping-stepper-index-text: #f8fbff;
  --shipping-stepper-title: #f3f8ff;
  --shipping-stepper-copy: rgba(184, 203, 232, 0.86);
  --shipping-benefits-copy: rgba(193, 210, 235, 0.9);
  --shipping-benefits-strong: #f4f9ff;

  /* Theme switcher */
  --theme-toggle-bg: rgba(12, 23, 30, 0.56);
  --theme-toggle-border: var(--color-border);
  --theme-toggle-color: var(--color-text-primary);
  --theme-toggle-hover-bg: var(--color-surface-soft);
  --theme-toggle-hover-border: var(--color-border-strong);
  --theme-toggle-icon-bg: var(--color-surface-soft);
  --theme-toggle-icon-color: var(--color-text-secondary);
  --theme-toggle-icon-active-bg: var(--color-action-primary);
  --theme-toggle-icon-active-color: #ffffff;
}