/**
 * variables.css — Mallorkinas Child Theme
 * Variables CSS globales extraídas del CSS del plugin configurador y auditoría.
 *
 * Fuentes de los valores:
 * - #60123F detectado en front.css del plugin mallorkinas-configurator (color primario de botones y swatches activos)
 * - Tipografías: heredadas del tema / Pendiente de confirmar con capturas
 * - Espaciados y radios: extraídos del CSS del configurador
 */

:root {

    /* ========================================
       COLORES DE MARCA
       ======================================== */

    --mk-color-primary:     #60123F;   /* Burdeos oscuro — botones, swatches activos, links activos */
    --mk-color-primary-rgb: 96, 18, 63;
    --mk-color-primary-hover: #4a0d30; /* Versión más oscura para hover */

    --mk-color-secondary:   #ffffff;   /* Blanco — fondos de panel, cards */
    --mk-color-accent:      #60123F;   /* Mismo que primary, pendiente de confirmar acento distinto */

    /* Pendiente de confirmar con capturas */
    --mk-color-gold:        #c9a45c;   /* Pendiente de confirmar con capturas */

    /* ========================================
       TEXTOS
       ======================================== */

    --mk-text-main:         #111827;   /* Texto principal — detectado en front.css */
    --mk-text-muted:        #6b7280;   /* Texto secundario/muted — detectado en front.css */
    --mk-text-light:        #9ca3af;   /* Texto muy claro */
    --mk-text-on-primary:   #ffffff;   /* Texto sobre fondo primario */

    /* ========================================
       BORDES Y FONDOS
       ======================================== */

    --mk-border-color:      #e5e7eb;   /* Borde general — detectado en front.css */
    --mk-border-color-soft: #eef0f3;   /* Borde suave para cards — detectado en front.css */
    --mk-bg-page:           #ffffff;   /* Fondo página */
    --mk-bg-section:        #f9fafb;   /* Fondo secciones alternas — Pendiente de confirmar */
    --mk-bg-card:           #ffffff;   /* Fondo cards */

    /* ========================================
       TIPOGRAFÍAS
       ======================================== */

    --mk-font-main:         inherit;   /* Fuente principal — heredada del tema */
    --mk-font-heading:      inherit;   /* Fuente headings — heredada del tema */
    --mk-font-size-base:    16px;
    --mk-font-size-sm:      14px;
    --mk-font-size-xs:      12px;
    --mk-font-size-lg:      18px;
    --mk-font-size-xl:      20px;
    --mk-font-size-h1:      clamp(28px, 5vw, 48px);
    --mk-font-size-h2:      clamp(22px, 4vw, 36px);
    --mk-font-size-h3:      clamp(18px, 3vw, 24px);
    --mk-line-height-base:  1.6;
    --mk-line-height-tight: 1.2;

    /* ========================================
       LAYOUT
       ======================================== */

    --mk-container-width:       1200px;
    --mk-container-width-wide:  1480px;
    --mk-section-padding:       80px;
    --mk-section-padding-md:    60px;
    --mk-section-padding-mobile: 48px;

    /* ========================================
       RADIOS DE BORDE
       ======================================== */

    --mk-radius-xs:     6px;
    --mk-radius-sm:     8px;
    --mk-radius-md:     12px;
    --mk-radius-card:   16px;      /* Cards de producto */
    --mk-radius-panel:  22px;      /* Paneles grandes */
    --mk-radius-pill:   999px;     /* Botones píldora */

    /* ========================================
       SOMBRAS
       ======================================== */

    --mk-shadow-sm:     0 2px 8px rgba(15, 23, 42, 0.05);
    --mk-shadow-md:     0 8px 24px rgba(15, 23, 42, 0.08);
    --mk-shadow-lg:     0 14px 38px rgba(15, 23, 42, 0.10);
    --mk-shadow-panel:  0 14px 38px rgba(15, 23, 42, 0.06);

    /* ========================================
       TRANSICIONES
       ======================================== */

    --mk-transition:        180ms ease;
    --mk-transition-slow:   300ms ease;

    /* ========================================
       BOTONES
       ======================================== */

    --mk-btn-padding-y:     12px;
    --mk-btn-padding-x:     24px;
    --mk-btn-font-size:     var(--mk-font-size-sm);
    --mk-btn-font-weight:   600;
    --mk-btn-radius:        var(--mk-radius-pill);
    --mk-btn-border:        1px solid var(--mk-border-color);
    --mk-btn-transition:    transform var(--mk-transition), box-shadow var(--mk-transition), opacity var(--mk-transition);

    /* ========================================
       CARDS DE PRODUCTO
       ======================================== */

    --mk-card-radius:       var(--mk-radius-card);
    --mk-card-padding:      14px;
    --mk-card-border:       1px solid var(--mk-border-color-soft);
    --mk-card-shadow:       none;
    --mk-card-shadow-hover: var(--mk-shadow-md);

    /* ========================================
       FORMULARIOS
       ======================================== */

    --mk-input-padding-y:   12px;
    --mk-input-padding-x:   14px;
    --mk-input-border:      1px solid var(--mk-border-color);
    --mk-input-radius:      var(--mk-radius-md);
    --mk-input-focus-color: var(--mk-color-primary);

    /* ========================================
       BREAKPOINTS (referencia — usar en media queries)
       ======================================== */

    /* Mobile:   < 600px  */
    /* Tablet:   600px – 980px */
    /* Desktop:  > 980px */
    /* Wide:     > 1200px */

    --mk-bp-mobile:  600px;
    --mk-bp-tablet:  980px;
    --mk-bp-desktop: 1200px;
}