/* ==========================================================================
   Variables — Megalaser by Acuciante Design
   ========================================================================== */

:root {
    /* ── Colores de marca ── */
    --ml-primary:       #C8102E;   /* Rojo Megalaser — CTAs */
    --ml-primary-dark:  #9B0D23;
    --ml-primary-light: #E8354D;
    --ml-secondary:     #09414F;   /* Teal oscuro — header, títulos */
    --ml-secondary-dark:#042832;
    --ml-secondary-light:#0C5A6D;
    --ml-accent:        #4AC1C0;   /* Turquesa/verde — acentos */
    --ml-accent-dark:   #00838F;
    --ml-accent-light:  #80D8D8;

    /* ── Neutros ── */
    --ml-white:         #FFFFFF;
    --ml-gray-50:       #F8F9FA;
    --ml-gray-100:      #F1F3F5;
    --ml-gray-200:      #E9ECEF;
    --ml-gray-300:      #DEE2E6;
    --ml-gray-400:      #CED4DA;
    --ml-gray-500:      #ADB5BD;
    --ml-gray-600:      #6C757D;
    --ml-gray-700:      #495057;
    --ml-gray-800:      #343A40;
    --ml-gray-900:      #212529;
    --ml-black:         #0D0D0D;

    /* ── Semánticos ── */
    --ml-success:       #28A745;
    --ml-warning:       #FFC107;
    --ml-danger:        #DC3545;
    --ml-info:          #17A2B8;

    /* ── Tipografía ── */
    --ml-font-body:     'Lato', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --ml-font-heading:  'Roboto Condensed', 'Roboto', sans-serif;
    --ml-font-mono:     'JetBrains Mono', 'Fira Code', monospace;

    --ml-fs-xs:         0.75rem;    /* 12px */
    --ml-fs-sm:         0.875rem;   /* 14px */
    --ml-fs-base:       1rem;       /* 16px */
    --ml-fs-md:         1.125rem;   /* 18px */
    --ml-fs-lg:         1.25rem;    /* 20px */
    --ml-fs-xl:         1.5rem;     /* 24px */
    --ml-fs-2xl:        2rem;       /* 32px */
    --ml-fs-3xl:        2.5rem;     /* 40px */
    --ml-fs-4xl:        3rem;       /* 48px */

    --ml-fw-normal:     400;
    --ml-fw-medium:     500;
    --ml-fw-semibold:   600;
    --ml-fw-bold:       700;

    --ml-lh-tight:      1.2;
    --ml-lh-base:       1.6;
    --ml-lh-relaxed:    1.8;

    /* ── Espaciado ── */
    --ml-space-xs:      0.25rem;
    --ml-space-sm:      0.5rem;
    --ml-space-md:      1rem;
    --ml-space-lg:      1.5rem;
    --ml-space-xl:      2rem;
    --ml-space-2xl:     3rem;
    --ml-space-3xl:     4rem;
    --ml-space-4xl:     6rem;

    /* ── Layout ── */
    --ml-container:     1280px;
    --ml-container-sm:  720px;
    --ml-container-lg:  1440px;
    --ml-header-h:      80px;
    --ml-topbar-h:      40px;

    /* ── Bordes y radios ── */
    --ml-radius-sm:     4px;
    --ml-radius:        8px;
    --ml-radius-lg:     12px;
    --ml-radius-xl:     16px;
    --ml-radius-full:   9999px;

    /* ── Sombras ── */
    --ml-shadow-sm:     0 1px 2px rgba(0,0,0,.06);
    --ml-shadow:        0 2px 8px rgba(0,0,0,.08);
    --ml-shadow-md:     0 4px 16px rgba(0,0,0,.1);
    --ml-shadow-lg:     0 8px 32px rgba(0,0,0,.12);
    --ml-shadow-xl:     0 16px 48px rgba(0,0,0,.16);

    /* ── Transiciones ── */
    --ml-transition:    200ms ease;
    --ml-transition-slow: 400ms ease;
}

/* ==========================================================================
   Dark Mode — Paleta nocturna industrial
   ========================================================================== */

[data-theme="dark"] {
    /* ── Colores de marca (dark) ── */
    --ml-primary:       #E8354D;
    --ml-primary-dark:  #C8102E;
    --ml-primary-light: #FF5A6E;
    --ml-secondary:     #B8D8E0;
    --ml-secondary-dark:#8CBAC6;
    --ml-secondary-light:#D0E8EE;
    --ml-accent:        #5ED4D3;
    --ml-accent-dark:   #3ABFBF;
    --ml-accent-light:  #8AE4E3;

    /* ── Neutros invertidos ── */
    --ml-white:         #111820;
    --ml-gray-50:       #151D25;
    --ml-gray-100:      #1A242E;
    --ml-gray-200:      #222F3A;
    --ml-gray-300:      #2D3D4A;
    --ml-gray-400:      #4A5D6E;
    --ml-gray-500:      #7A8D9C;
    --ml-gray-600:      #A0B0BC;
    --ml-gray-700:      #C0CDD6;
    --ml-gray-800:      #DAE3EA;
    --ml-gray-900:      #EDF1F5;
    --ml-black:         #F5F7FA;

    /* ── Sombras (dark) ── */
    --ml-shadow-sm:     0 1px 2px rgba(0,0,0,.25);
    --ml-shadow:        0 2px 8px rgba(0,0,0,.3);
    --ml-shadow-md:     0 4px 16px rgba(0,0,0,.35);
    --ml-shadow-lg:     0 8px 32px rgba(0,0,0,.4);
    --ml-shadow-xl:     0 16px 48px rgba(0,0,0,.5);

    color-scheme: dark;
}

/* Textos base en dark */
[data-theme="dark"] body {
    color: var(--ml-gray-800);
    background: var(--ml-white);
}

/* Header dark adjustments */
[data-theme="dark"] .ml-header {
    background: rgba(17, 24, 32, 0.95);
    backdrop-filter: blur(12px);
}

[data-theme="dark"] .ml-header.is-scrolled {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
    background: rgba(17, 24, 32, 0.98);
}

[data-theme="dark"] .ml-header__logo img {
    filter: brightness(0) invert(1);
}

/* Links y nav en dark */
[data-theme="dark"] .ml-nav__link {
    color: var(--ml-gray-700);
}

[data-theme="dark"] .ml-nav__link:hover {
    color: var(--ml-accent);
}

/* Topbar dark */
[data-theme="dark"] .ml-topbar {
    background: #0A1018;
    color: var(--ml-gray-600);
}

[data-theme="dark"] .ml-topbar__item {
    color: var(--ml-gray-600);
}

[data-theme="dark"] .ml-topbar__item:hover {
    color: var(--ml-gray-900);
}

[data-theme="dark"] .ml-topbar__social a {
    color: var(--ml-gray-500);
}

[data-theme="dark"] .ml-topbar__social a:hover {
    color: var(--ml-gray-900);
}

/* Cards, borders */
[data-theme="dark"] .ml-product-card,
[data-theme="dark"] .ml-part-card,
[data-theme="dark"] .ml-category-card {
    background: var(--ml-gray-50);
    border-color: var(--ml-gray-200);
}

/* Sale badge dark */
[data-theme="dark"] .onsale {
    background: #0A1018;
    color: var(--ml-accent);
    border-color: rgba(74, 193, 192, 0.4);
    box-shadow: 0 2px 12px rgba(74, 193, 192, 0.2);
}

/* WC notices dark */
[data-theme="dark"] .woocommerce-message {
    background: #0A1018;
    border-left-color: var(--ml-accent);
}

[data-theme="dark"] .woocommerce-message a.button,
[data-theme="dark"] .woocommerce-message a.wc-forward {
    background: var(--ml-accent);
    color: #0A1018;
}

/* Footer dark */
[data-theme="dark"] .ml-footer {
    background: #0A1018;
    color: var(--ml-gray-600);
}

[data-theme="dark"] .ml-footer a {
    color: var(--ml-gray-500);
}

[data-theme="dark"] .ml-footer a:hover {
    color: var(--ml-gray-900);
}

[data-theme="dark"] .ml-footer__col-title {
    color: var(--ml-gray-800);
}

[data-theme="dark"] .ml-footer__desc {
    color: var(--ml-gray-500);
}

[data-theme="dark"] .ml-footer__bottom {
    border-top-color: var(--ml-gray-200);
}

[data-theme="dark"] .ml-footer__bottom-inner {
    color: var(--ml-gray-500);
}

[data-theme="dark"] .ml-footer__social-link {
    background: var(--ml-gray-200);
    color: var(--ml-gray-500);
}

[data-theme="dark"] .ml-footer__contact-item {
    color: var(--ml-gray-600);
}

/* Mobile menu dark */
[data-theme="dark"] .ml-mobile-menu {
    background: var(--ml-gray-50);
}

/* Inputs/selects */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: var(--ml-gray-100);
    border-color: var(--ml-gray-300);
    color: var(--ml-gray-800);
}

/* WooCommerce tabs dark */
[data-theme="dark"] .woocommerce-tabs ul.tabs {
    background: var(--ml-white) !important;
    border-bottom-color: var(--ml-gray-200);
}

[data-theme="dark"] .woocommerce-tabs ul.tabs li a {
    color: var(--ml-gray-600);
}

[data-theme="dark"] .woocommerce-tabs ul.tabs li a:hover {
    color: var(--ml-gray-800);
    background: var(--ml-gray-100);
}

[data-theme="dark"] .woocommerce-tabs .woocommerce-Tabs-panel {
    background: var(--ml-white);
}

[data-theme="dark"] .woocommerce-tabs .woocommerce-Tabs-panel p,
[data-theme="dark"] .woocommerce-tabs .woocommerce-Tabs-panel li {
    color: var(--ml-gray-700);
}

[data-theme="dark"] .woocommerce-tabs .woocommerce-Tabs-panel h3,
[data-theme="dark"] .woocommerce-tabs .woocommerce-Tabs-panel h4 {
    color: var(--ml-secondary);
}

/* Galería dark */
[data-theme="dark"] .ml-product__gallery .woocommerce-product-gallery__wrapper {
    background: var(--ml-gray-100);
}