:root {
  --bg: #ffffff;
  --panel: #ffffff;
  --text: #111;
  --muted: #666;
  --accent: #c8102e;
  --card-shadow: 0 6px 30px rgba(0,0,0,0.08);
}

/* dark theme variables */
.sixtiq-theme-dark {
  --bg: #0b0c0e;
  --panel: #0f1113;
  --text: #e6e6e6;
  --muted: #9aa0a6;
  --accent: #ff6b6b;
  --card-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

/* apply variables */
body {
  background: var(--bg) !important;
  color: var(--text) !important;
}
.container, .card, .modal, .modal-card, .invoice, .po-table, .block, .comments, .totals {
  background: var(--panel) !important;
  box-shadow: var(--card-shadow) !important;
}
a, .brand h1, .po-title, .inv-meta h2 {
  color: var(--accent) !important;
}
.small, label, .muted { color: var(--muted) !important; }

/* keep existing selectors but prefer variables where you'd want colors */
.logo-wrap, .logo-box { background: var(--panel) !important; }
.btn { background: var(--text); color: var(--panel); }
.btn-primary { background: var(--accent); color: #fff; }
.preview-modal .modal-card { background: var(--panel); color: var(--text); }