/** * ═══════════════════════════════════════════════════════════════════════ * ECOSMART RESTOBAR — Theme Light * ═══════════════════════════════════════════════════════════════════════ * * Sobreescribe las variables del tema dark (delivery/css/variables.css) * con valores claros profesionales. Se carga DESPUÉS de variables.css * y main.css para tener prioridad por cascada CSS. * * ARQUITECTURA: * 1. delivery/css/variables.css ← tokens dark (NO se modifica) * 2. delivery/css/main.css ← componentes (NO se modifica) * 3. restobar/assets/css/theme-light.css ← ESTE ARCHIVO (sobreescribe colores) * 4. restobar/assets/css/restobar-app.css ← overrides específicos restobar * * Todos los componentes de main.css (eco-card, btn-*, badge-*, etc.) * siguen funcionando — solo cambian los colores via variables. * * SOPORTE DARK MODE: Si el usuario prefiere dark, se agrega * data-theme="dark" al y se revierten las variables. * ═══════════════════════════════════════════════════════════════════════ */ :root { /* ═══ PALETA BASE — LIGHT ═══ */ --void: #f8f9fa; --dark-1: #ffffff; --dark-2: #ffffff; --dark-3: #f3f4f6; --dark-4: #e5e7eb; --dark-5: #d1d5db; --dark-6: #9ca3af; /* ═══ PRIMARIO — Verde elegante (restaurante/orgánico) ═══ */ --orange: #16a34a; --orange-light: #22c55e; --orange-dark: #15803d; --orange-10: rgba(22,163,74,.08); --orange-15: rgba(22,163,74,.12); --orange-20: rgba(22,163,74,.18); /* ═══ ACENTO — Dorado cálido ═══ */ --gold: #b45309; --gold-light: #d97706; --gold-dark: #92400e; --gold-10: rgba(180,83,9,.07); --gold-15: rgba(180,83,9,.10); --gold-20: rgba(180,83,9,.15); --gold-border: rgba(180,83,9,.20); /* ═══ SEMÁNTICOS ═══ */ --success: #16a34a; --success-10: rgba(22,163,74,.08); --success-20: rgba(22,163,74,.15); --danger: #dc2626; --danger-10: rgba(220,38,38,.07); --danger-20: rgba(220,38,38,.12); --info: #2563eb; --info-10: rgba(37,99,235,.07); --warning: #d97706; --warning-10: rgba(217,119,6,.07); /* ═══ TEXTO — Alto contraste en fondo claro ═══ */ --txt-1: #111827; --txt-2: #374151; --txt-3: #6b7280; --txt-4: #9ca3af; --txt-5: #d1d5db; /* ═══ BORDES — Suaves ═══ */ --border-1: #f3f4f6; --border-2: #e5e7eb; --border-3: #d1d5db; /* ═══ SOMBRAS — Sutiles para light ═══ */ --sh-xs: 0 1px 2px rgba(0,0,0,.05); --sh-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); --sh-md: 0 4px 6px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04); --sh-lg: 0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.04); --sh-xl: 0 20px 25px rgba(0,0,0,.10), 0 8px 10px rgba(0,0,0,.04); --sh-orange: 0 4px 14px rgba(22,163,74,.15); --sh-gold: 0 4px 14px rgba(180,83,9,.12); /* ═══ ALIASES CORTOS (compatibilidad delivery/cocina) ═══ */ --d1: #ffffff; --d2: #ffffff; --d3: #f3f4f6; --d4: #e5e7eb; --d5: #d1d5db; --b1: #f3f4f6; --b2: #e5e7eb; --b3: #d1d5db; --t1: #111827; --t2: #374151; --t3: #6b7280; --t4: #9ca3af; --green: #16a34a; --red: #dc2626; --warn: #d97706; --blue: #2563eb; --orange-h: #15803d; --gold-h: #92400e; --o10: rgba(22,163,74,.08); --g10: rgba(180,83,9,.07); --gborder: rgba(180,83,9,.20); --s10: rgba(22,163,74,.08); --s20: rgba(22,163,74,.15); --r-tint: rgba(220,38,38,.07); --w10: rgba(217,119,6,.07); --i10: rgba(37,99,235,.07); } /* ═══ DARK MODE OVERRIDE ═══ Si el admin activa modo oscuro: Restaura los valores originales del dark theme */ [data-theme="dark"] { --void: #080808; --dark-1: #0f0f0f; --dark-2: #161616; --dark-3: #1e1e1e; --dark-4: #272727; --dark-5: #333333; --dark-6: #404040; --orange: #e67e22; --orange-light: #f39c12; --orange-dark: #d35400; --orange-10: rgba(230,126,34,.10); --orange-15: rgba(230,126,34,.15); --orange-20: rgba(230,126,34,.20); --gold: #c9971c; --gold-light: #e2ab20; --gold-dark: #a07816; --gold-10: rgba(201,151,28,.10); --gold-15: rgba(201,151,28,.15); --gold-20: rgba(201,151,28,.20); --gold-border: rgba(201,151,28,.25); --success: #27ae60; --success-10: rgba(39,174,96,.10); --success-20: rgba(39,174,96,.20); --danger: #e74c3c; --danger-10: rgba(231,76,60,.10); --danger-20: rgba(231,76,60,.20); --info: #2980b9; --info-10: rgba(41,128,185,.10); --warning: #f39c12; --warning-10: rgba(243,156,18,.10); --txt-1: #f5f5f5; --txt-2: #c8c8c8; --txt-3: #8a8a8a; --txt-4: #555555; --txt-5: #3a3a3a; --border-1: #1f1f1f; --border-2: #2a2a2a; --border-3: #353535; --sh-xs: 0 1px 4px rgba(0,0,0,.3); --sh-sm: 0 2px 8px rgba(0,0,0,.4); --sh-md: 0 8px 24px rgba(0,0,0,.5); --sh-lg: 0 16px 48px rgba(0,0,0,.6); --sh-xl: 0 24px 64px rgba(0,0,0,.7); --d1:#0f0f0f; --d2:#161616; --d3:#1e1e1e; --d4:#272727; --d5:#333333; --b1:#1f1f1f; --b2:#2a2a2a; --b3:#353535; --t1:#f5f5f5; --t2:#c8c8c8; --t3:#8a8a8a; --t4:#555555; --green:#27ae60; --red:#e74c3c; --warn:#f39c12; --blue:#2980b9; }