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

  --bg-page: #e8ebeb;
  --bg-surface: #ffffff;
  --bg-subtle: #ecebe7;
  --bg-surface-elevated: #ffffff;
  --ambient-cyan: var(--bg-subtle);
  --ambient-violet: #ded1df;
  --ambient-blue: #eee4c8;
  --bg-page-treatment:
    radial-gradient(
      ellipse 1180px 760px at -10% -4%,
      color-mix(in srgb, var(--ambient-cyan) 34%, transparent) 0%,
      transparent 73%
    ),
    radial-gradient(
      ellipse 1080px 980px at 108% 53%,
      color-mix(in srgb, var(--ambient-violet) 30%, transparent) 0%,
      transparent 76%
    ),
    radial-gradient(
      ellipse 1280px 760px at 28% 106%,
      color-mix(in srgb, var(--ambient-blue) 27%, transparent) 0%,
      transparent 75%
    ),
    linear-gradient(108deg, rgba(214, 222, 224, 0.08) 0%, transparent 35%, rgba(220, 219, 214, 0.08) 100%),
    var(--bg-page);

  --light-canvas-top: var(--bg-page);
  --light-canvas-mid: var(--bg-subtle);
  --light-canvas-bottom: var(--bg-page-treatment);
  --canvas-grid: none;
  --canvas-grid-size: 44px 44px;
  --canvas-grid-opacity: 0;
  --canvas-vignette: transparent;
  --canvas-grain: none;

  --light-canvas-glass-tint:
    radial-gradient(circle at 14% 16%,
      color-mix(in srgb, var(--color-accent-violet) 8%, transparent) 0%,
      transparent 26%),
    radial-gradient(circle at 86% 12%,
      color-mix(in srgb, var(--color-surface-soft) 6%, transparent) 0%,
      transparent 24%),
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(248, 250, 254, 0.18) 45%,
      rgba(242, 245, 251, 0.14) 100%);
  --light-canvas-glass-tint-soft:
    radial-gradient(circle at 14% 16%,
      color-mix(in srgb, var(--color-accent-violet) 6%, transparent) 0%,
      transparent 28%),
    radial-gradient(circle at 86% 12%,
      color-mix(in srgb, var(--color-surface-soft) 5%, transparent) 0%,
      transparent 24%),
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(248, 250, 254, 0.14) 45%,
      rgba(242, 245, 251, 0.10) 100%);

  /* Semantic foundation */
  --color-blanco: #ffffff;
  --color-negro: #101218;
  --color-text-primary: #101218;
  --color-text-secondary: #636b79;
  --color-text-muted: #8f98a8;
  --color-surface: var(--bg-surface);
  --color-surface-soft: var(--bg-subtle);
  --color-bg-neutral: var(--bg-page);
  --color-accent-soft: color-mix(in srgb,
      var(--color-accent-violet) 12%,
      transparent);
  --color-border: #d8dee9;
  --color-border-strong: #b7c1d3;
  --color-focus: color-mix(in srgb, var(--color-accent-blue) 24%, transparent);
  --color-gris-claro: #8b8c89;

  --color-body-bg: var(--bg-page-treatment);
  --liquid-glass-blur-strong: 18px;
  --liquid-glass-blur-medium: 9px;
  --liquid-glass-blur-soft: 7px;
  --liquid-glass-saturate: 150%;
  --liquid-glass-saturate-soft: 142%;

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

  /* Header + navbar */
  --nav-shell-border: rgba(122, 132, 168, 0.12);
  --nav-shell-shadow:
    0 20px 42px rgba(39, 64, 107, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(123, 149, 194, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  --nav-shell-tint: var(--light-canvas-glass-tint);
  --nav-shell-shine:
    inset 0 1px 0 rgba(255, 255, 255, 0.66),
    inset 0 -1px 0 rgba(149, 172, 210, 0.35);

  --nav-link-color: rgba(30, 54, 92, 0.94);
  --nav-link-hover-color: #0e2548;
  --nav-link-hover-bg: rgba(221, 234, 252, 0.75);
  --nav-link-active-color: #102a53;
  --nav-link-active-underline: var(--color-action-primary);

  --dropdown-surface-border: rgba(161, 182, 218, 0.55);
  --mega-menu-border: var(--dropdown-surface-border);
  --dropdown-surface-bg: rgba(243, 248, 255, 0.28);
  --dropdown-surface-shadow:
    0 24px 54px rgba(31, 53, 92, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(133, 157, 199, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  --dropdown-surface-tint: var(--light-canvas-glass-tint);
  --dropdown-surface-shine:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(135, 161, 205, 0.28);
  --mega-menu-shadow: var(--dropdown-surface-shadow);
  --mega-menu-tint: var(--dropdown-surface-tint);
  --mega-menu-shine: var(--dropdown-surface-shine);
  --mega-menu-text: #1c2f52;
  --mega-menu-eyebrow: rgba(42, 70, 113, 0.8);
  --mega-menu-title: #10284f;

  --mega-menu-chip-border: rgba(147, 173, 214, 0.6);
  --mega-menu-chip-bg: rgba(236, 245, 255, 0.88);
  --mega-menu-chip-color: rgba(35, 58, 94, 0.95);
  --mega-menu-chip-hover-border: rgba(107, 140, 193, 0.66);
  --mega-menu-chip-hover-bg: rgba(223, 237, 255, 0.96);

  --mega-menu-item-color: rgba(29, 50, 83, 0.92);
  --mega-menu-item-bg: rgba(255, 255, 255, 0.58);
  --mega-menu-item-border: rgba(138, 160, 198, 0.32);
  --mega-menu-item-hover-bg: rgba(213, 229, 251, 0.62);
  --mega-menu-item-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66), 0 12px 28px rgba(39, 62, 101, 0.08);
  --mega-menu-item-hover-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 16px 32px rgba(39, 62, 101, 0.12);
  --mega-menu-link-color: rgba(49, 84, 135, 0.95);
  --mega-menu-link-hover: #0f274d;
  --mega-menu-name-color: #122a53;
  --mega-menu-count-color: rgba(66, 92, 130, 0.9);
  --mega-menu-empty-border: rgba(135, 165, 210, 0.54);
  --mega-menu-empty-color: rgba(49, 78, 118, 0.9);

  --searchbar-bg: rgba(255, 255, 255, 0.74);
  --searchbar-border: rgba(140, 166, 207, 0.56);
  --searchbar-focus-border: var(--color-action-primary);
  --searchbar-focus-bg: var(--color-surface);
  --searchbar-focus-ring: color-mix(in srgb, var(--color-action-primary) 25%, transparent);
  --searchbar-input-color: #132b54;
  --searchbar-placeholder: rgba(78, 103, 141, 0.82);
  --searchbar-btn-hover-bg: rgba(210, 227, 250, 0.8);
  --searchbar-icon-filter: none;

  --nav-toggle-border: rgba(140, 166, 208, 0.56);
  --nav-toggle-bg: rgba(255, 255, 255, 0.74);
  --nav-toggle-bar: #2a4775;

  --nav-mobile-shell-border: rgba(122, 132, 168, 0.12);
  --nav-mobile-shell-shadow:
    0 18px 38px rgba(39, 64, 107, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    inset 0 -1px 0 rgba(123, 149, 194, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  --nav-mobile-shell-tint: var(--light-canvas-glass-tint-soft);
  --nav-mobile-shell-shine:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    inset 0 -1px 0 rgba(149, 172, 210, 0.14);
  --nav-mobile-icon-bg: rgba(255, 255, 255, 0.05);
  --nav-mobile-icon-border: rgba(255, 255, 255, 0.12);
  --nav-mobile-icon-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --mobile-menu-bg-liquid: rgba(255, 255, 255, 0.34);
  --mobile-menu-border-liquid: rgba(139, 164, 204, 0.3);
  --mobile-menu-shadow-liquid:
    0 22px 48px rgba(39, 64, 107, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.32);

  --mobile-menu-bg: rgba(246, 247, 251, 0.96);
  --mobile-menu-border-top: rgba(139, 164, 204, 0.5);
  --mobile-submenu-border: rgba(134, 161, 203, 0.45);
  --mobile-submenu-link: rgba(40, 69, 112, 0.94);
  --mobile-submenu-hover-color: #0f274d;
  --mobile-submenu-hover-bg: rgba(214, 230, 252, 0.8);
  --mobile-submenu-link-all: rgba(30, 64, 109, 0.96);

  /* Footer */
  --footer-text: #1b2e4d;
  --footer-border: var(--nav-mobile-shell-border);
  --footer-shadow: var(--nav-mobile-shell-shadow);
  --footer-tint:
    linear-gradient(
      135deg,
      color-mix(in srgb, #eaf8f3 82%, transparent) 0%,
      color-mix(in srgb, var(--bg-surface) 74%, transparent) 100%
    );
  --footer-shine: var(--nav-mobile-shell-shine);
  --footer-link-hover: #0f274d;
  --footer-heading-color: #102a53;
  --footer-nav-link-color: rgba(41, 70, 112, 0.94);
  --footer-social-border: rgba(147, 173, 214, 0.52);
  --footer-social-bg: rgba(236, 245, 255, 0.88);
  --footer-social-hover-border: rgba(106, 138, 191, 0.66);
  --footer-social-hover-bg: rgba(223, 237, 255, 0.98);
  --footer-icon-filter: none;
  --footer-copyright-border: rgba(139, 165, 206, 0.44);
  --footer-copyright-color: rgba(41, 67, 107, 0.88);
  --footer-copyright-link: rgba(30, 58, 99, 0.95);

  /* 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: #1d2f50;
  --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: var(--nav-toggle-border);
  --card-glass-hover-shadow:
    0 22px 48px rgba(39, 64, 107, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    inset 0 -1px 0 rgba(149, 172, 210, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  --card-media-bg: #e8effa;
  --card-media-shadow:
    0 8px 20px rgba(45, 69, 110, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --card-description-color: rgba(55, 82, 122, 0.9);
  --card-title-color: #10284f;
  --card-old-price-color: rgba(82, 108, 146, 0.72);
  --card-current-price-color: #142d57;
  --card-link-color: rgba(46, 74, 114, 0.92);
  --card-link-hover: #0f274d;
  --card-breakdown-color: rgba(73, 97, 133, 0.86);
  --card-cotizar-color: #11865b;

  --pd-card-bg: var(--color-surface);
  --pd-media-bg: var(--color-surface-soft);
  --pd-title-color: var(--color-text-primary);
  --pd-muted-color: var(--color-text-muted);
  --pdp-panel-bg: var(--color-surface);
  --pdp-qty-border: #dcd2ea;
  --pdp-label-color: #4f4062;
  --pdp-btn-color: #4f4062;
  --pdp-btn-hover-bg: #f4ecfb;
  --pdp-hint-color: #8c8199;
  --pdp-table-head: #222222;
  --pdp-table-cell: #555555;
  --pack-option-subtitle: #6b6b6b;

  --search-suggest-image-bg: #f3f4f6;

  /* Services forms */
  --service-panel-border: var(--color-border);
  --service-panel-shadow:
    0 20px 44px rgba(39, 64, 107, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(135, 159, 201, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  --service-panel-tint: linear-gradient(135deg,
      rgba(247, 251, 255, 0.22) 0%,
      rgba(235, 244, 255, 0.18) 45%,
      rgba(223, 236, 255, 0.14) 100%);
  --service-panel-shine:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    inset 0 -1px 0 rgba(135, 161, 204, 0.3);
  --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) 92%, transparent);
  --service-info-bg-end: color-mix(in srgb, var(--color-surface) 86%, transparent);
  --service-info-border: var(--color-border);
  --service-info-inner-border: rgba(255, 255, 255, 0.5);
  --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(255, 255, 255, 0.98);
  --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: #d97706;
  --service-inline-tooltip-bg: #2a2414;
  --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(255, 255, 255, 0.74);
  --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 30px rgba(38, 63, 103, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(136, 161, 204, 0.3);
  --service-carrier-hover-shadow:
    0 22px 42px rgba(33, 56, 96, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.76),
    inset 0 -1px 0 rgba(127, 154, 197, 0.34);
  --service-carrier-title: var(--color-text-primary);
  --service-carrier-cta: var(--color-action-primary);

  /* Shipping cards */
  --shipping-card-border: rgba(154, 179, 217, 0.56);
  --shipping-card-bg-accent: rgba(137, 175, 245, 0.22);
  --shipping-card-bg: linear-gradient(135deg,
      rgba(244, 250, 255, 0.94) 0%,
      rgba(231, 242, 255, 0.9) 100%);
  --shipping-card-shadow:
    0 16px 34px rgba(37, 61, 102, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(135, 161, 204, 0.28);
  --shipping-card-text: #1a3158;
  --shipping-kicker-color: rgba(60, 95, 150, 0.9);
  --shipping-title-color: #10284f;
  --shipping-tagline-color: rgba(43, 74, 116, 0.92);
  --shipping-lead-color: rgba(63, 89, 128, 0.9);
  --shipping-section-title-color: #14305a;
  --shipping-section-text-color: rgba(67, 93, 132, 0.9);
  --shipping-map-wrap-border: rgba(151, 177, 216, 0.52);
  --shipping-map-wrap-glow: rgba(120, 159, 224, 0.24);
  --shipping-map-wrap-bg: color-mix(in srgb, var(--color-surface-soft) 88%, transparent);
  --shipping-map-footnote: rgba(76, 103, 142, 0.88);
  --shipping-province-fill: rgba(124, 150, 199, 0.62);
  --shipping-province-stroke: rgba(235, 244, 255, 0.66);
  --shipping-province-hover-stroke: rgba(255, 255, 255, 0.98);
  --shipping-tooltip-border: rgba(127, 160, 214, 0.58);
  --shipping-tooltip-bg: linear-gradient(135deg,
      rgba(242, 248, 255, 0.98) 0%,
      rgba(225, 238, 255, 0.96) 100%);
  --shipping-tooltip-shadow: 0 16px 28px rgba(34, 56, 95, 0.22);
  --shipping-tooltip-title: #0f294f;
  --shipping-tooltip-subtitle: rgba(65, 92, 131, 0.9);
  --shipping-stepper-item-border: rgba(154, 179, 217, 0.42);
  --shipping-stepper-item-bg: rgba(236, 245, 255, 0.9);
  --shipping-stepper-index-bg: linear-gradient(135deg,
      rgba(84, 128, 204, 0.96) 0%,
      rgba(43, 106, 189, 0.94) 100%);
  --shipping-stepper-index-text: #f8fbff;
  --shipping-stepper-title: #1a335c;
  --shipping-stepper-copy: rgba(73, 98, 137, 0.9);
  --shipping-benefits-copy: rgba(69, 94, 133, 0.9);
  --shipping-benefits-strong: #132d56;

  /* Theme switcher */
  --theme-toggle-bg: rgba(255, 255, 255, 0.74);
  --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;
}