/* MIEDECO SPS - shared design tokens. ONE palette for light and dark, used by admin, login, customer app, kiosk and error pages.
 * theme.js sets data-theme="light|dark" on <html> (and data-bs-theme for Bootstrap). The @media block is only the no-JavaScript fallback. */
:root, :root[data-theme=light] {
  color-scheme: light;
  --brand: #0b7a4b; --brand-dark: #0b5d3b; --brand-text: #0b7a4b; --brand-soft: #e6f4ec; --accent: #f2b705;
  --bg: #f4f6f5; --surface: #ffffff; --surface-2: #edf2ef; --text: #1c2622; --muted: #66746d; --border: #dfe6e2;
  --danger: #c0392b; --warn: #b7791f; --ok: #1a8f57;
  --ok-bg: #d9f2e4; --ok-fg: #0b5d3b; --warn-bg: #fdf0d0; --warn-fg: #7a5200; --bad-bg: #fbdcd8; --bad-fg: #8c2116;
  --promo: #c2410c; --promo-bg: #ffedd5; --idle-bg: #e6e9e8; --idle-fg: #444;
  --grad-a: #064e2f; --grad-b: #0b7a4b;
  --radius: 16px; --shadow: 0 2px 10px rgba(16, 40, 30, .08);
}
:root[data-theme=dark] {
  color-scheme: dark;
  --brand: #0b7a4b; --brand-dark: #0b5d3b; --brand-text: #52d69a; --brand-soft: #14352a; --accent: #f2b705;
  --bg: #0d1511; --surface: #16211b; --surface-2: #1e2c25; --text: #e8f0ec; --muted: #98a9a0; --border: #2b3a32;
  --danger: #e5604f; --warn: #d9a441; --ok: #3fbf85;
  --ok-bg: #123a2a; --ok-fg: #7fe5b3; --warn-bg: #3b2f10; --warn-fg: #f3cf6e; --bad-bg: #44211d; --bad-fg: #ffb4a8;
  --promo: #ff9d5c; --promo-bg: #3d2513; --idle-bg: #26312b; --idle-fg: #b6c4bc;
  --grad-a: #07110d; --grad-b: #10301f;
  --shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --brand-text: #52d69a; --brand-soft: #14352a; --bg: #0d1511; --surface: #16211b; --surface-2: #1e2c25; --text: #e8f0ec; --muted: #98a9a0; --border: #2b3a32;
    --danger: #e5604f; --warn: #d9a441; --ok: #3fbf85; --ok-bg: #123a2a; --ok-fg: #7fe5b3; --warn-bg: #3b2f10; --warn-fg: #f3cf6e; --bad-bg: #44211d; --bad-fg: #ffb4a8;
    --promo: #ff9d5c; --promo-bg: #3d2513; --idle-bg: #26312b; --idle-fg: #b6c4bc; --grad-a: #07110d; --grad-b: #10301f; --shadow: 0 2px 10px rgba(0, 0, 0, .45);
  }
}
/* Bootstrap follows the same palette in BOTH modes, so inputs, cards, alerts, tables, modals, progress bars match everywhere. */
:root, [data-bs-theme=light], [data-bs-theme=dark] {
  --bs-body-bg: var(--surface); --bs-body-color: var(--text); --bs-emphasis-color: var(--text);
  --bs-secondary-color: var(--muted); --bs-secondary-bg: var(--surface-2); --bs-tertiary-bg: var(--bg); --bs-tertiary-color: var(--muted);
  --bs-border-color: var(--border); --bs-link-color-rgb: 11, 122, 75; --bs-heading-color: var(--text);
}
[data-bs-theme=dark] { --bs-link-color-rgb: 82, 214, 154; --bs-link-hover-color-rgb: 127, 229, 179; }
body { background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.text-muted { color: var(--muted) !important; }
.card-s { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.text-muted-s { color: var(--muted) !important; }
.btn-brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-brand:hover, .btn-brand:focus { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-outline-brand { color: var(--brand-text); border-color: var(--brand); }
.btn-outline-brand:hover { background: var(--brand); color: #fff; }
.pill { display: inline-block; padding: .25rem .75rem; border-radius: 999px; font-weight: 700; font-size: .8rem; letter-spacing: .04em; }
.pill-ok { background: var(--ok-bg); color: var(--ok-fg); } .pill-warn { background: var(--warn-bg); color: var(--warn-fg); }
.pill-bad { background: var(--bad-bg); color: var(--bad-fg); } .pill-idle { background: var(--idle-bg); color: var(--idle-fg); }
/* light / dark switch button (same markup everywhere: see theme_button()) */
.theme-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; cursor: pointer; }
.theme-btn .i-sun { display: none; } [data-theme=dark] .theme-btn .i-sun { display: inline-block; } [data-theme=dark] .theme-btn .i-moon { display: none; }
.theme-btn.on-brand { border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.14); color: #fff; border-radius: 12px; width: 42px; height: 42px; }
.theme-btn.on-brand:hover { background: rgba(255,255,255,.28); }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
/* outline buttons read clearly in BOTH modes */
.btn-outline-secondary { --bs-btn-color: var(--text); --bs-btn-border-color: var(--border); --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-color: var(--text); --bs-btn-hover-border-color: var(--muted);
  --bs-btn-active-bg: var(--surface-2); --bs-btn-active-color: var(--text); --bs-btn-active-border-color: var(--muted); --bs-btn-disabled-color: var(--muted); --bs-btn-disabled-border-color: var(--border); }
.btn-outline-success { --bs-btn-color: var(--brand-text); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--brand); --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-color: #fff; }
.btn-outline-danger { --bs-btn-color: var(--danger); --bs-btn-border-color: var(--danger); }