/**
 * RUTA: /assets/css/variables.css
 * ============================================================
 *  "Warm Dark Premium" — optimizado para 8-10h diarias
 *  + Modo claro completo
 *  + Sidebar que cambia con el tema
 * ============================================================
 */

/* ══ MODO OSCURO — Warm Dark ══════════════════════════════════
   Filosofía: negro cálido en lugar de azul frío.
   Contraste controlado (~8:1) en lugar de máximo (~14:1).
   Menos fatiga, más legibilidad real.
   ══════════════════════════════════════════════════════════ */
:root,
:root[data-theme="dark"] {

  /* Fondos — cálidos, no azul frío */
  --bg-base:            #111110;
  --bg-surface:         #1a1917;
  --bg-elevated:        #222120;
  --bg-hover:           #2a2927;
  --bg-border:          rgba(255,255,255,0.08);
  --bg-border-hover:    rgba(255,255,255,0.14);

  /* Texto — blanco cálido, contraste controlado ~8:1 */
  --text-primary:       #e8e6e3;
  --text-secondary:     #b8b4ae;
  --text-muted:         #7a7570;

  /* Acento */
  --accent:             #6366f1;
  --accent-hover:       #5254cc;
  --accent-glow:        rgba(99,102,241,0.14);

  /* Estados */
  --success:            #22c55e;
  --success-bg:         rgba(34,197,94,0.1);
  --success-border:     rgba(34,197,94,0.2);

  --warning:            #f59e0b;
  --warning-bg:         rgba(245,158,11,0.1);
  --warning-border:     rgba(245,158,11,0.2);

  --danger:             #ef4444;
  --danger-bg:          rgba(239,68,68,0.1);
  --danger-border:      rgba(239,68,68,0.2);

  --info:               #3b82f6;
  --info-bg:            rgba(59,130,246,0.1);
  --info-border:        rgba(59,130,246,0.2);

  /* Sombras */
  --shadow-sm:          0 1px 3px rgba(0,0,0,0.35);
  --shadow-card:        0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:          0 6px 24px rgba(0,0,0,0.45);
  --shadow-lg:          0 12px 40px rgba(0,0,0,0.55);

  /* Sidebar — cálido oscuro */
  --sidebar-bg:             #141312;
  --sidebar-border:         rgba(255,255,255,0.07);
  --sidebar-text:           #9a9690;
  --sidebar-text-hover:     #e8e6e3;
  --sidebar-active-bg:      rgba(255,255,255,0.07);
  --sidebar-active-text:    #e8e6e3;
  --sidebar-section-label:  rgba(255,255,255,0.28);
  --sidebar-brand-text:     #ffffff;
  --sidebar-user-name:      #ffffff;

  /* Topbar */
  --topbar-bg:          #1a1917;
  --topbar-border:      rgba(255,255,255,0.07);

  /* POS — colores específicos para el punto de venta */
  --pos-bg:             #111110;
  --pos-panel-bg:       #1a1917;
  --pos-card-bg:        #222120;
  --pos-cart-bg:        #141312;
  --pos-input-bg:       #222120;
  --pos-text:           #e8e6e3;
  --pos-text-muted:     #7a7570;
  --pos-border:         rgba(255,255,255,0.08);
  --pos-item-hover:     #2a2927;
  --pos-total-bg:       #1a1917;

  /* Toggle */
  --toggle-bg:          #2a2927;
  --toggle-icon:        #9a9690;
  --toggle-icon-hover:  #e8e6e3;
}

/* ══ MODO CLARO ═══════════════════════════════════════════════ */
:root[data-theme="light"] {

  /* Fondos */
  --bg-base:            #f4f6fb;
  --bg-surface:         #ffffff;
  --bg-elevated:        #edf0f7;
  --bg-hover:           #e5e9f2;
  --bg-border:          #dde3ee;
  --bg-border-hover:    #c8d0e0;

  /* Texto */
  --text-primary:       #111827;
  --text-secondary:     #4b5563;
  --text-muted:         #6b7280;

  /* Acento */
  --accent:             #6366f1;
  --accent-hover:       #4f46e5;
  --accent-glow:        rgba(99,102,241,0.1);

  /* Estados */
  --success:            #16a34a;
  --success-bg:         rgba(22,163,74,0.09);
  --success-border:     rgba(22,163,74,0.2);

  --warning:            #d97706;
  --warning-bg:         rgba(217,119,6,0.09);
  --warning-border:     rgba(217,119,6,0.2);

  --danger:             #dc2626;
  --danger-bg:          rgba(220,38,38,0.09);
  --danger-border:      rgba(220,38,38,0.2);

  --info:               #2563eb;
  --info-bg:            rgba(37,99,235,0.09);
  --info-border:        rgba(37,99,235,0.2);

  /* Sombras */
  --shadow-sm:          0 1px 2px rgba(15,23,42,0.05);
  --shadow-card:        0 2px 8px rgba(15,23,42,0.07);
  --shadow-md:          0 4px 16px rgba(15,23,42,0.1);
  --shadow-lg:          0 8px 32px rgba(15,23,42,0.12);

  /* Sidebar claro */
  --sidebar-bg:             #ffffff;
  --sidebar-border:         #dde3ee;
  --sidebar-text:           #5a6478;
  --sidebar-text-hover:     #111827;
  --sidebar-active-bg:      rgba(99,102,241,0.08);
  --sidebar-active-text:    #4f46e5;
  --sidebar-section-label:  #9ba3b0;
  --sidebar-brand-text:     #111827;
  --sidebar-user-name:      #111827;

  /* Topbar */
  --topbar-bg:          #ffffff;
  --topbar-border:      #dde3ee;

  /* POS claro */
  --pos-bg:             #f4f6fb;
  --pos-panel-bg:       #ffffff;
  --pos-card-bg:        #ffffff;
  --pos-cart-bg:        #ffffff;
  --pos-input-bg:       #ffffff;
  --pos-text:           #111827;
  --pos-text-muted:     #6b7280;
  --pos-border:         #dde3ee;
  --pos-item-hover:     #edf0f7;
  --pos-total-bg:       #f4f6fb;

  /* Toggle */
  --toggle-bg:          #edf0f7;
  --toggle-icon:        #6b7280;
  --toggle-icon-hover:  #111827;
}

/* ══ TOKENS COMPARTIDOS ═══════════════════════════════════════ */
:root {
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.72rem;    --text-sm:   0.8125rem;
  --text-base: 0.9375rem;  --text-lg:   1.0625rem;
  --text-xl:   1.25rem;    --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;

  --fw-light:300; --fw-normal:400; --fw-medium:500;
  --fw-semibold:600; --fw-bold:700; --fw-extrabold:800;

  --sp-1:.25rem; --sp-2:.5rem;   --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.25rem;--sp-6:1.5rem;  --sp-7:1.75rem;--sp-8:2rem;
  --sp-10:2.5rem;--sp-12:3rem;

  --radius-sm:4px;  --radius-md:8px;   --radius-lg:12px;
  --radius-xl:16px; --radius-2xl:20px; --radius-full:9999px;

  --t-fast:.1s ease; --t-base:.18s ease; --t-slow:.3s ease;
  --t-spring:cubic-bezier(0.34,1.56,0.64,1);

  --sidebar-width:240px;
  --topbar-height:60px;
  --content-max-width:1280px;
}

/* ══ TRANSICIONES SUAVES ══════════════════════════════════════ */
html { transition: background-color 0.3s ease, color 0.3s ease; }
*,*::before,*::after {
  transition:
    background-color 0.25s ease,
    border-color     0.25s ease,
    color            0.2s ease,
    box-shadow       0.25s ease;
}
.btn,a,button,input,select,textarea {
  transition:
    background-color 0.15s ease,
    border-color     0.15s ease,
    color            0.15s ease,
    box-shadow       0.15s ease,
    filter           0.15s ease,
    transform        0.15s ease;
}