/* =====================================================================
   THEME · LUBRIMOTORS CLASSIC
   ---------------------------------------------------------------------
   Default. Branding corporativo: rojo Lubrimotor protagonista en CTAs
   y datos críticos. Fondos crema sutiles, tipografía clara.
   Contraste WCAG AA validado.
   ===================================================================== */

[data-theme="lubrimotors"] {
    /* ─────── Marca ─────── */
    --brand-primary:        #E30613;
    --brand-primary-hover:  #B8050F;
    --brand-primary-active: #8C040C;
    --brand-primary-light:  #FCE4E6;
    --brand-primary-soft:   #FEF2F2;
    --brand-secondary:      #18181B;
    --brand-accent:         #FFFFFF;

    /* ─────── Superficies ─────── */
    --bg-app:             #F7F7F8;
    --bg-surface:         #FFFFFF;
    --bg-elevated:        #FFFFFF;
    --bg-muted:           #F1F1F2;
    --bg-sidebar:         #18181B;
    --bg-sidebar-active:  #E30613;
    --bg-overlay:         rgba(15, 23, 42, 0.5);

    /* ─────── Texto ─────── */
    --text-primary:       #18181B;
    --text-secondary:     #52525B;
    --text-tertiary:      #71717A;
    --text-disabled:      #A1A1AA;
    --text-inverse:       #FFFFFF;
    --text-link:          #E30613;

    /* ─────── Bordes ─────── */
    --border-subtle:      #E5E7EB;
    --border-default:     #D4D4D8;
    --border-strong:      #A1A1AA;
    --border-focus:       #E30613;

    /* ─────── 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;

    /* ─────── Header sólido (diferenciador visual) ─────── */
    --topbar-bg: #E30613;
    --topbar-border: #B8050F;
    --topbar-text: #FFFFFF;
    --topbar-text-muted: rgba(255, 255, 255, 0.75);
    --topbar-hover: rgba(255, 255, 255, 0.12);
    --topbar-shadow: 0 2px 8px rgba(227, 6, 19, 0.15);
    /* ───── Header 3D (tabs conectadas + barra de contexto) ───── */
    --header-gradient-top: #7A040C;
    --header-gradient-mid: #C8050F;
    --header-gradient-bottom: #E30613;
    --context-bg: rgba(0, 0, 0, 0.18);
    --context-text: rgba(255, 255, 255, 0.92);
    --context-text-muted: rgba(255, 255, 255, 0.68);
    --tab-bg: rgba(0, 0, 0, 0.14);
    --tab-text: rgba(255, 255, 255, 0.82);
    --tab-hover-bg: rgba(255, 255, 255, 0.10);
    --tab-active-bg: #FFFFFF;
    --tab-active-text: #E30613;
    --tab-active-accent: #E30613;
    --brand-badge-bg: #FFFFFF;
    --brand-badge-text: #E30613;
    --tab-radius: 11px 11px 0 0;
}