/*====================================================
  VARIABLES.CSS
  Variables globales del tema visual
====================================================*/

:root{

    /*==================================================
      IDENTIDAD DE LA EMPRESA
      (Modificadas desde config-data.js)
    ==================================================*/

    --color-principal: #FFA500;
    --color-secundario: #7F00FF;

    --logo-width: 54px;
    --logo-height: 54px;

    /*==================================================
      FONDOS
    ==================================================*/

    --color-fondo: #F5F5F5;

    --color-panel: #FFFFFF;

    --color-panel-secundario: #FAFAFA;

    /*==================================================
      TIPOGRAFÍA
    ==================================================*/

    --font-family:
        Arial,
        Helvetica,
        sans-serif;

    --font-xs: .75rem;
    --font-sm: .85rem;
    --font-md: 1rem;
    --font-lg: 1.20rem;
    --font-xl: 1.50rem;

    --font-weight-normal:400;
    --font-weight-medium:500;
    --font-weight-bold:700;

    /*==================================================
      COLORES DE TEXTO
    ==================================================*/

    --color-texto:#222222;

    --color-texto-secundario:#666666;

    --color-texto-claro:#FFFFFF;

    /*==================================================
      BORDES
    ==================================================*/

    --color-borde:#DDDDDD;

    --color-borde-suave:#EEEEEE;

    --radius-sm:8px;

    --radius-md:12px;

    --radius-lg:16px;

    --radius-pill:999px;

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

    --shadow-sm:
        0 2px 6px rgba(0,0,0,.08);

    --shadow-md:
        0 4px 12px rgba(0,0,0,.10);

    --shadow-lg:
        0 8px 20px rgba(0,0,0,.15);

    /*==================================================
      HEADER
    ==================================================*/

    --header-top-height:74px;

    --header-search-height:62px;

    --header-icon-color:#FFFFFF;

    --header-placeholder:#888888;

    /*==================================================
      INPUTS
    ==================================================*/

    --input-height:44px;

    --input-radius:999px;

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

    --button-height:44px;

    --button-radius:999px;

    /*==================================================
      PRODUCTOS
    ==================================================*/

    --product-radius:16px;

    --product-image-radius:12px;

    /*==================================================
      ESTADOS
    ==================================================*/

    --color-stock:#2E7D32;

    --color-sin-stock:#D32F2F;

    --color-promocion:#E53935;

    --color-nuevo:#1565C0;

    --color-destacado:#FF9800;

    /*==================================================
      INFORMACIÓN
    ==================================================*/

    --color-exito:#2E7D32;

    --color-alerta:#F9A825;

    --color-error:#C62828;

    --color-info:#1976D2;

    /*==================================================
      ESPACIADOS
    ==================================================*/

    --space-xs:4px;

    --space-sm:8px;

    --space-md:12px;

    --space-lg:16px;

    --space-xl:24px;

    --space-xxl:32px;

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

    --transition-fast:.15s;

    --transition:.25s;

    --transition-slow:.40s;

    /*==================================================
      CAPAS (z-index)
    ==================================================*/

    --z-header:1000;

    --z-banner:900;

    --z-modal:2000;

    --z-toast:3000;

}