/* Design tokens shared by the shop, the login pages and the panel app.
   Light values live on :root; dark values apply when the OS prefers dark (unless the user picked
   light) or when the user picked dark. theme.js sets data-theme on <html> from the saved choice. */
:root {
  color-scheme: light;
  --fg: #1f2933;
  --muted: #616e7c;
  --bg: #f5f7fa;
  --surface: #fff;
  --surface-2: #f0f3f7;
  --card: var(--surface);
  --border: #e4e7eb;
  --border-strong: #cbd2d9;
  --accent: #2f6fde;
  --accent-hover: #2559b8;
  --on-accent: #fff;
  --danger: #c62828;
  --success: #2e7d32;
  --warning: #9a5b00;
  --row-zebra: #f8fafc;
  --row-hover: #eef2f7;
  --row-selected: #e3ecfb;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, .15);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fg: #e4e7eb;
    --muted: #9aa5b1;
    --bg: #0f1419;
    --surface: #1a2129;
    --surface-2: #222b35;
    --border: #2d3742;
    --border-strong: #3e4c59;
    --accent: #6b9bf2;
    --accent-hover: #8db2f5;
    --on-accent: #0f1419;
    --danger: #ef6461;
    --success: #5cb85f;
    --warning: #e0a030;
    --row-zebra: #1d252e;
    --row-hover: #24303c;
    --row-selected: #233552;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, .5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --fg: #e4e7eb;
  --muted: #9aa5b1;
  --bg: #0f1419;
  --surface: #1a2129;
  --surface-2: #222b35;
  --border: #2d3742;
  --border-strong: #3e4c59;
  --accent: #6b9bf2;
  --accent-hover: #8db2f5;
  --on-accent: #0f1419;
  --danger: #ef6461;
  --success: #5cb85f;
  --warning: #e0a030;
  --row-zebra: #1d252e;
  --row-hover: #24303c;
  --row-selected: #233552;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, .5);
}

/* Header logo slot of the business: hidden unless /branding.css sets its image. */
.brand-logo { display: none; width: 2rem; height: 2rem; margin-right: .5rem; vertical-align: middle;
  background: center / contain no-repeat; }