/**
 * Levelup POS design tokens — one component kit, two palettes.
 * Accent = locked primary blue (#2563eb). Money actions still use pay green via .btn-role-pay.
 * Appearance may override --bg/--fg/--card etc on <html style>; components use --ds-* with fallbacks.
 */
:root {
  --ds-accent-core: #2563eb;
  --ds-accent-core-hover: #1d4ed8;
  --ds-pay-core: #16a34a;
  --ds-pay-core-hover: #15803d;

  /* Left nav / menu — FIXED neutral chrome (same in light + dark) */
  --ds-nav-bg: #141a22;
  --ds-nav-fg: #e8eef4;
  --ds-nav-muted: #93a0b0;
  --ds-nav-border: #2a3542;
  --ds-nav-hover-bg: rgba(255, 255, 255, 0.06);
  --ds-nav-hover-fg: #ffffff;
  --ds-nav-active-bg: rgba(37, 99, 235, 0.22);
  --ds-nav-active-fg: #e8eef4;
  --ds-nav-accent: #2563eb;
  --ds-nav-footer-bg: rgba(0, 0, 0, 0.22);
  --ds-sidebar: var(--ds-nav-bg);
}

/* —— Dark (default) —— */
html,
html[data-theme="dark"] {
  color-scheme: dark;

  --ds-bg: #0f1419;
  /* sidebar chrome: fixed --ds-nav-* (not theme-flipped) */
  --ds-elevated: #1a222c;
  --ds-row: transparent;
  --ds-row-hover: rgba(255, 255, 255, 0.045);
  --ds-input: #151c26;
  --ds-border: #2a3542;
  --ds-text: #e7ecf1;
  --ds-text-muted: #8b9aab;
  --ds-accent: var(--ds-accent-core);
  --ds-accent-muted: rgba(37, 99, 235, 0.22);
  --ds-success: #22c55e;
  --ds-warning: #d97706;
  --ds-danger: #f07178;

  --ds-ghost-bg: transparent;
  --ds-ghost-fg: var(--ds-text);
  --ds-ghost-border: var(--ds-border);
  --ds-ghost-hover-bg: rgba(255, 255, 255, 0.06);

  --ds-chip-bg: #1e2833;
  --ds-chip-fg: var(--ds-text);
  --ds-chip-border: var(--ds-border);

  --ds-badge-bg: var(--ds-accent-muted);
  --ds-badge-fg: #dbeafe;
  --ds-badge-border: rgba(37, 99, 235, 0.4);

  --ds-modal-bg: #141b24;
  --ds-modal-backdrop: rgba(0, 0, 0, 0.55);

  --ds-link: var(--ds-text);
  --ds-link-hover: var(--ds-accent);

  --bg: var(--ds-bg);
  --fg: var(--ds-text);
  --muted: var(--ds-text-muted);
  --accent: var(--ds-accent);
  --danger: var(--ds-danger);
  --card: var(--ds-elevated);
  --border: var(--ds-border);
  --sidebar: var(--ds-nav-bg);
  --topbar: var(--ds-sidebar);
  --topbar-fg: var(--ds-text);
  --success: var(--ds-success);
  --warning: var(--ds-warning);
  --input-bg: var(--ds-input);
  --input-fg: var(--ds-text);
  --input-border: var(--ds-border);
}

/* —— Light —— */
html[data-theme="light"] {
  color-scheme: light;

  --ds-bg: #f4f6f8;
  /* sidebar chrome: fixed --ds-nav-* (not theme-flipped) */
  --ds-elevated: #ffffff;
  --ds-row: transparent;
  --ds-row-hover: #f1f5f9;
  --ds-input: #ffffff;
  --ds-border: #e2e8f0;
  --ds-text: #0f172a;
  --ds-text-muted: #64748b;
  --ds-accent: var(--ds-accent-core);
  --ds-accent-muted: rgba(37, 99, 235, 0.12);
  --ds-success: #15803d;
  --ds-warning: #d97706;
  --ds-danger: #dc2626;

  --ds-ghost-bg: transparent;
  --ds-ghost-fg: #334155;
  --ds-ghost-border: #cbd5e1;
  --ds-ghost-hover-bg: #f1f5f9;

  --ds-chip-bg: #f8fafc;
  --ds-chip-fg: #1e293b;
  --ds-chip-border: #94a3b8;

  --ds-badge-bg: #eff6ff;
  --ds-badge-fg: #1e40af;
  --ds-badge-border: #bfdbfe;

  --ds-modal-bg: #ffffff;
  --ds-modal-backdrop: rgba(15, 23, 42, 0.45);

  --ds-link: var(--ds-text);
  --ds-link-hover: var(--ds-accent);

  --bg: var(--ds-bg);
  --fg: var(--ds-text);
  --muted: var(--ds-text-muted);
  --accent: var(--ds-accent);
  --danger: var(--ds-danger);
  --card: var(--ds-elevated);
  --border: var(--ds-border);
  --sidebar: var(--ds-nav-bg);
  --topbar: #ffffff;
  --topbar-fg: var(--ds-text);
  --success: var(--ds-success);
  --warning: var(--ds-warning);
  --input-bg: var(--ds-input);
  --input-fg: var(--ds-text);
  --input-border: var(--ds-border);
}