/* =========================================================
   VARIABLES / TOKENS DE MARCA — Naccato Brandbook
   ---------------------------------------------------------
   Home canonico del :root del child theme de Woodmart.
   Cualquier token nuevo o alias vive aca, NO duplicado en
   style.css ni en los parciales. Encolado como
   'naccato-woodmart-variables' ANTES del style.css del child
   y como dependencia suya (ver functions.php) para garantizar
   que las variables existan antes de cualquier hoja que las use.

   Estos tokens los consumen los componentes custom portados desde
   el child de Storefront (boton Caja x12, badge de descuento). Los
   colores/tipografias GLOBALES del sitio se setean ademas en
   Woodmart > Theme Settings (Global Typography & Colors).
   ========================================================= */

:root {
    /* Colores
       NOTA (skin Vegetables, 2026-06-22): el COLOR DE MARCA (--color-brand-*)
       NO se toca en esta fase — la paleta se decide en una fase posterior.
       Lo unico que adopta el skin Vegetables por ahora es: tipografia (Manrope),
       forma semi-redondeada (~10px) y fondo crema de pagina. */
    --color-brand-primary:    #38627A; /* Azul Legado institucional (SIN CAMBIO — paleta pendiente) */
    --color-brand-dark:       #24424f; /* Azul mas oscuro para hover/bordes (SIN CAMBIO) */
    --color-brand-light:      #5a8fa8; /* Azul aclarado para acentos secundarios (SIN CAMBIO) */
    --color-brand-pale:       #eaf2f6; /* Fondo muy claro derivado del azul (SIN CAMBIO) */

    --color-text-primary:     #1a1a1a;
    --color-text-secondary:   #555555;
    --color-text-muted:       #888888;
    --color-text-on-brand:    #ffffff;

    /* Fondo crema suave del skin Vegetables. Las cards/superficies de producto
       quedan BLANCAS (--color-bg-surface #ffffff) para contraste sobre el crema. */
    --color-bg-body:          #FAF8F5; /* Crema de pagina (skin Vegetables; antes #ffffff) */
    --color-bg-surface:       #ffffff; /* Superficies/cards BLANCAS para contraste (antes #f7f7f7) */
    --color-bg-dark:          #1a1a1a;

    --color-border:           #e0e0e0;
    --color-border-strong:    #c0c0c0;

    /* Estado / accion */
    --color-success:          #3a7d44;
    --color-error:            #c0392b;

    /* Tipografias — Demo Vegetables de WoodMart (pedido Matias 25/06 #1):
       Manrope = unica familia en todo el sitio (el theme/demo manda; cuerpo 400,
       titulos 600/700). Oswald/Roboto/Merriweather de marca RETIRADAS.
       Noto Sans JP = kanji decorativo del hero (SIN CAMBIO). */
    --font-heading:  'Manrope', sans-serif;                /* Titulos H1–H6, encabezados, banners */
    --font-body:     'Manrope', sans-serif;                /* Cuerpo, UI, tablas, botones, fichas */
    --font-editorial:'Manrope', sans-serif;                /* Parrafos largos: opcional (sin uso aun) */
    --font-japanese: 'Noto Sans JP', sans-serif;           /* Kanji decorativo del hero (SIN CAMBIO) */

    /* Escala tipografica */
    --text-xs:    0.75rem;
    --text-sm:    0.875rem;
    --text-base:  1rem;
    --text-lg:    1.125rem;
    --text-xl:    1.25rem;
    --text-2xl:   1.5rem;
    --text-3xl:   1.875rem;
    --text-4xl:   2.25rem;
    --text-5xl:   3rem;

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

    /* Bordes
       Skin Vegetables (2026-06-22): forma semi-redondeada global (~10px).
       Botones/forms usan --radius-md (10px), cards --radius-card (14px). */
    --radius-sm:  4px;     /* antes 2px */
    --radius-md:  10px;    /* Botones/forms semi-rounded (skin Vegetables; antes 4px) */
    --radius-lg:  12px;    /* antes 8px */
    --radius-card: 14px;   /* Radio de cards (skin Vegetables; antes 12px) */
    --radius-pill: 9999px; /* Badges / botones pill */

    /* Roles semanticos (apuntan a colores de marca; cambiar el color = cambiar el apuntador) */
    --color-discount-badge-bg: var(--color-success); /* Badge "X% OFF": verde de marca = ahorro */

    /* Sombras */
    --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
    --shadow-md:  0 4px 12px rgba(0,0,0,.12);
    --shadow-lg:  0 8px 24px rgba(0,0,0,.16);

    /* Transicion base */
    --transition: 180ms ease;

}