/* =====================================================================
   LUBRIMOTOR · Sistema de tokens CSS globales
   =====================================================================
   Variables base que NO dependen de marca. Los temas individuales
   (themes/lubrimotors.css, themes/dark.css) hacen override de las
   variables de color/marca.

   Reglas:
   - NUNCA usar valores literales en components.css o vistas.
     Siempre usar var(--variable).
   - Cambiar el theme = cambiar todo el sistema visual.
   ===================================================================== */

:root {
    /* ============ MARCA (default; cada theme override) ============ */
    --brand-primary:       #E30613;
    --brand-primary-hover: #B8050F;
    --brand-primary-light: #FCE4E6;
    --brand-secondary:     #1A1A1A;
    --brand-accent:        #FFFFFF;

    /* ============ SUPERFICIES ============ */
    --bg-app:             #F5F5F5;
    --bg-surface:         #FFFFFF;
    --bg-elevated:        #FFFFFF;
    --bg-sidebar:         #1A1A1A;
    --bg-sidebar-active:  #E30613;
    --bg-overlay:         rgba(0, 0, 0, 0.55);

    /* ============ TEXTO ============ */
    --text-primary:   #1A1A1A;
    --text-secondary: #555555;
    --text-tertiary:  #8A8A8A;
    --text-inverse:   #FFFFFF;
    --text-link:      #E30613;

    /* ============ BORDES ============ */
    --border-subtle:  #E5E5E5;
    --border-default: #D0D0D0;
    --border-strong:  #999999;

    /* ============ SEMÁNTICOS ============ */
    --color-success:    #16A34A;
    --color-success-bg: #DCFCE7;
    --color-warning:    #F59E0B;
    --color-warning-bg: #FEF3C7;
    --color-danger:     #DC2626;
    --color-danger-bg:  #FEE2E2;
    --color-info:       #2563EB;
    --color-info-bg:    #DBEAFE;

    /* ============ ESTADOS DE NEGOCIO ============ */
    --status-ot-abierta:  var(--color-info);
    --status-ot-proceso:  var(--color-warning);
    --status-ot-cerrada:  var(--color-success);
    --status-ot-anulada:  var(--text-tertiary);

    --status-pedido-pend:  var(--color-warning);
    --status-pedido-aprob: var(--color-info);
    --status-pedido-desp:  #7C3AED;
    --status-pedido-fact:  var(--color-success);

    --status-cobranza-vig:  var(--color-success);
    --status-cobranza-prox: var(--color-warning);
    --status-cobranza-venc: var(--color-danger);

    /* ============ TIPOGRAFÍA ============ */
    --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Montserrat', sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, monospace;

    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-lg:   1.125rem;
    --fs-xl:   1.25rem;
    --fs-2xl:  1.5rem;
    --fs-3xl:  1.875rem;
    --fs-4xl:  2.25rem;

    --fs-pos-button: 1.125rem;
    --fs-pos-total:  2.5rem;

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-bold:    700;

    /* ============ ESPACIADO ============ */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* ============ RADIO ============ */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-pill: 999px;

    /* ============ SOMBRAS ============ */
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.12);
    --shadow-pos: 0 2px 8px rgba(227, 6, 19, 0.15);

    /* ============ TRANSICIONES ============ */
    --transition-fast: 120ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 320ms ease;

    /* ============ LAYOUT ============ */
    --sidebar-width:           260px;
    --sidebar-width-collapsed: 72px;
    --topbar-height:           64px;
    --pos-cart-width:          420px;
    --pos-product-grid-gap:    12px;
    --container-max:           1400px;

    /* ============ Z-INDEX ============ */
    --z-dropdown: 100;
    --z-modal:    1000;
    --z-toast:    2000;
    --z-tooltip:  3000;
}