/* ============================================================
   SMACHIL POS — Variables CSS globales
   Extraído de index.html (líneas 118-135) — Fase 1 modularización
   ============================================================ */
:root {
  --bg: #F8F9FA;
  --surface: #FFFFFF;
  --surface2: #F1F3F5;
  --border: #E9ECEF;
  /* --accent ahora apunta al brand primary (seteado por businessTheme.js) */
  --accent: var(--brand-primary, #FDC80F);
  --accent2: #E5B200;
  --text: #212529;
  --muted: #6C757D;
  --green: #10B981;
  --red: #EF4444;
  --blue: #3B82F6;
  --yellow: #F59E0B;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.08);
  --shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.12);
  /* Spacing scale */
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px; --sp-xl: 20px; --sp-2xl: 24px;
  /* Border-radius scale */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 999px;
}

/* ── Dark Mode ── */
html[data-theme="dark"] {
  --bg: #0f1117;
  --surface: #1a1d27;
  --surface2: #242835;
  --border: #2e3345;
  --text: #e1e4eb;
  --muted: #8b90a0;
  --accent2: #d4a00d;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.6);
}

/* ── Icon utility ── */
.icon { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.icon svg { width: 1em; height: 1em; }