/* theme.css - light is default */

:root {
  --bg: #ffffff;
  --text: #111111;
  --card: #ffffff;
  --border: #eaeaea;
  --muted: #666666;
  --btn: #111111;
  --btnText: #ffffff;
  --badgeOkBg: #e9f9ef;
  --badgeOkText: #166534;
  --badgeOutBg: #ffecec;
  --badgeOutText: #991b1b;
}

html.dark {
  --bg: #0b0d10;
  --text: #e8eaed;
  --card: #12161b;
  --border: #25303a;
  --muted: #a5b2bf;
  --btn: #e8eaed;
  --btnText: #0b0d10;
  --badgeOkBg: #0d2a1a;
  --badgeOkText: #86efac;
  --badgeOutBg: #2a1010;
  --badgeOutText: #fca5a5;
}

/* apply vars */
body { background: var(--bg); color: var(--text); }
.card { background: var(--card); border-color: var(--border); }
.small, .mini { color: var(--muted); }
header { border-bottom: 1px solid var(--border); }
nav a { color: var(--text); }
input, textarea, select {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
}
button, .primary {
  background: var(--btn);
  color: var(--btnText);
  border: 1px solid var(--border);
}
.badge.ok { background: var(--badgeOkBg); color: var(--badgeOkText); }
.badge.out { background: var(--badgeOutBg); color: var(--badgeOutText); }