/* ══════════════════════════════════════════════════════════════
   BizMax360 theme — one token set shared by every page.
   Light is the default. Dark follows the device setting unless the
   user picks a theme (html[data-theme="light"|"dark"], see /js/theme.js).
   Every page and script should use these tokens, never raw hex, so a
   palette change here restyles the whole app.
   ══════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;

  /* Surfaces & lines */
  --bg: #f5f6fa;          /* page background */
  --paper: #ffffff;       /* cards, header, sheets */
  --cream: #f3f4f8;       /* inset / input backgrounds */
  --rule: #e4e7ee;        /* borders */
  --rule2: #cbd1dc;       /* stronger borders */

  /* Text */
  --ink: #0f172a;
  --ink2: #475569;
  --ink3: #8a94a6;

  /* Brand accent */
  --accent: #4f46e5;
  --accent-dark: #4338ca;
  --accent-bg: #eef2ff;
  --accent-light: #c7d2fe;
  --on-accent: #ffffff;

  /* Status: text tone / solid fill / tint background / tint border */
  --ok: #15803d;        --ok-solid: #16a34a;     --ok-bg: #ecfdf3;     --ok-border: #bbf7d0;
  --warn: #b45309;      --warn-solid: #d97706;   --warn-bg: #fffbeb;   --warn-border: #fde68a;
  --danger: #dc2626;    --danger-solid: #dc2626; --danger-bg: #fef2f2; --danger-border: #fecaca;
  --danger-text: #b91c1c;
  --info: #1d4ed8;      --info-solid: #2563eb;   --info-bg: #eff6ff;   --info-border: #bfdbfe;
  --muted: #6b7280;     --muted-bg: #eceef3;
  --purple: #7c3aed;    --pink: #db2777;         --teal: #0d9488;

  /* Legacy aliases still referenced in a few places */
  --success: var(--ok); --success-bg: var(--ok-bg);

  /* Misc */
  --tooltip-bg: #1e293b;
  --overlay: rgba(15, 23, 42, 0.5);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.16);
  --focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.18);
  --radius: 12px;
  --radius-sm: 8px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b1120; --paper: #131b2e; --cream: #1a2338; --rule: #263049; --rule2: #364460;
    --ink: #e8ecf4; --ink2: #aeb8cc; --ink3: #7d889e;
    --accent: #6366f1; --accent-dark: #4f46e5; --accent-bg: #1c2145; --accent-light: #3b3f8a;
    --ok: #4ade80;   --ok-bg: #0f2a1c;     --ok-border: #1f5a36;
    --warn: #fbbf24; --warn-bg: #2b2210;   --warn-border: #5a4413;
    --danger: #f87171; --danger-bg: #2d1515; --danger-border: #6b2323; --danger-text: #fca5a5;
    --info: #93c5fd; --info-bg: #12213d;   --info-border: #1e3a6e;
    --muted: #9aa3b5; --muted-bg: #222b40;
    --purple: #a78bfa; --pink: #f472b6; --teal: #2dd4bf;
    --tooltip-bg: #334155;
    --overlay: rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
    --focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1120; --paper: #131b2e; --cream: #1a2338; --rule: #263049; --rule2: #364460;
  --ink: #e8ecf4; --ink2: #aeb8cc; --ink3: #7d889e;
  --accent: #6366f1; --accent-dark: #4f46e5; --accent-bg: #1c2145; --accent-light: #3b3f8a;
  --ok: #4ade80;   --ok-bg: #0f2a1c;     --ok-border: #1f5a36;
  --warn: #fbbf24; --warn-bg: #2b2210;   --warn-border: #5a4413;
  --danger: #f87171; --danger-bg: #2d1515; --danger-border: #6b2323; --danger-text: #fca5a5;
  --info: #93c5fd; --info-bg: #12213d;   --info-border: #1e3a6e;
  --muted: #9aa3b5; --muted-bg: #222b40;
  --purple: #a78bfa; --pink: #f472b6; --teal: #2dd4bf;
  --tooltip-bg: #334155;
  --overlay: rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
  --focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.35);
}

/* Native controls (date pickers, selects, checkboxes) follow the theme */
input, select, textarea, button { color-scheme: inherit; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
::selection { background: var(--accent-light); color: var(--ink); }

/* Theme toggle button (header) */
.bm-theme-btn {
  background: var(--cream); border: 1px solid var(--rule); color: var(--ink2);
  border-radius: 999px; width: 32px; height: 32px; font-size: 0.95rem; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; padding: 0;
}
.bm-theme-btn:active { background: var(--rule); }

/* Shared wordmark: mark image + text, works on any background */
.bm-wordmark { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.bm-wordmark img { height: 28px; width: 28px; border-radius: 7px; }
.bm-wordmark b { font-weight: 800; letter-spacing: -0.4px; color: var(--ink); font-size: 1.02rem; }
.bm-wordmark b em { font-style: normal; color: var(--accent); }
.bm-wordmark.lg img { height: 56px; width: 56px; border-radius: 14px; }
.bm-wordmark.lg b { font-size: 1.9rem; letter-spacing: -0.8px; }