/**
 * Design Tokens: Medias Chill (Child Theme)
 *
 * Sobreescribe las variables CSS semánticas del motor Core (theme-simple-woo).
 * IMPORTANTE: Los colores usan canales RGB separados por espacio (R G B)
 * para permitir modificadores de opacidad de Tailwind: rgb(var(--color-*) / <alpha-value>).
 */

@font-face {
    font-family: 'Coolvetica';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: local('Coolvetica'),
         local('Coolvetica Rg'),
         url('assets/fonts/coolvetica.woff') format('woff');
}

:root {
    /* ==========================================================================
       1. IDENTIDAD DE MARCA (MEDIAS CHILL: STREETWEAR / RETRO CARTOON)
       ========================================================================== */

    /* Primario: Negro Puro (#000000) -> Contraste máximo para CTAs, bordes sticker y texto fuerte */
    --color-primary-rgb: 0 0 0;
    --color-on-primary-rgb: 255 255 255;

    /* Contenedor Primario: Celeste Chill (#B2DFFF -> 178 223 255) */
    --color-primary-container-rgb: 178 223 255;
    --color-on-primary-container-rgb: 0 0 0;

    /* Secundario: Gris Carbón (#333333 -> 51 51 51) para subtítulos y textos de apoyo */
    --color-secondary-rgb: 51 51 51;
    --color-on-secondary-rgb: 255 255 255;
    --color-secondary-container-rgb: 242 246 250;
    --color-on-secondary-container-rgb: 34 34 34;

    /* Terciario / Acento Pop: Amarillo Chill (#FEC600 -> 254 198 0) */
    --color-tertiary-rgb: 254 198 0;
    --color-on-tertiary-rgb: 0 0 0;

    /* Tokens Exclusivos Medias Chill */
    --mc-sky-rgb: 178 223 255;       /* #B2DFFF — Celeste Chill (Header & Confianza) */
    --mc-yellow-rgb: 254 198 0;      /* #FEC600 — Amarillo Mascota / Badges NUEVO / Lo Más Vendido */
    --mc-pink-rgb: 252 192 228;      /* #FCC0E4 — Rosa Chill (Cositas Originales) */
    --mc-magenta-rgb: 220 0 154;     /* #DC009A — Magenta Vibrante */
    --mc-black-rgb: 0 0 0;           /* #000000 — Negro Jet */

    /* ==========================================================================
       2. SUPERFICIES Y FONDOS NEUTROS
       ========================================================================== */
    --color-background-rgb: 248 248 255;
    --color-on-background-rgb: 34 34 34;

    --color-surface-rgb: 248 248 255;
    --color-surface-dim-rgb: 236 240 245;
    --color-surface-bright-rgb: 255 255 255;

    --color-surface-container-lowest-rgb: 255 255 255;
    --color-surface-container-low-rgb: 245 247 250;
    --color-surface-container-rgb: 238 242 246;
    --color-surface-container-high-rgb: 228 234 240;
    --color-surface-container-highest-rgb: 216 224 232;

    --color-on-surface-rgb: 34 34 34;
    --color-on-surface-variant-rgb: 85 85 85;

    --color-outline-rgb: 115 122 130;
    --color-outline-variant-rgb: 210 218 226;

    /* ==========================================================================
       3. ESTADOS SEMÁNTICOS Y COMERCIALES
       ========================================================================== */
    --color-error-rgb: 211 47 47;
    --color-on-error-rgb: 255 255 255;
    --color-error-container-rgb: 253 236 234;
    --color-on-error-container-rgb: 95 33 32;

    --color-success-rgb: 37 211 102;
    --color-warning-rgb: 254 198 0;
    --color-whatsapp-rgb: 37 211 102;

    /* Top Bar de Anuncio: Fondo Negro (#000000) con Texto Blanco (#FFFFFF) */
    --color-header-bar-bg-rgb: 0 0 0;
    --color-header-bar-text-rgb: 255 255 255;

    /* ==========================================================================
       4. TIPOGRAFÍA (COOLVETICA DISPLAY + LATO UI)
       ========================================================================== */
    --font-sans: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading: 'Coolvetica', 'Lato', sans-serif;
    --font-mono: 'Lato', sans-serif;

    /* ==========================================================================
       5. BORDES Y SOMBRAS
       ========================================================================== */
    --radius-badge: 6px;
    --radius-button: 9999px;
    --radius-card: 18px;
}