/* base.css — CSS variables + reset */

:root {
  --bg: #1a1a1a;
  --fg: #e0e0e0;
  --bar-bg: #1f1f1f;
  --bar-fg: #888;
  --bar-border: #2a2a2a;
  --status-on: #4caf50;
  --status-off: #f44336;
  --status-warn: #ffa726;
  --radius: 10px;

  /* Brand system — single source of truth */
  --brand: #7EC6BC;          /* logo teal */
  --brand-deep: #449287;     /* pair gradient end */
  --brand-grad: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%);
  --accent: var(--brand);    /* LOCKED: kill #4fc3f7 (blue) */
  --pairing-bg: #0a0a0a;     /* pairing screen always dark */
  --pairing-fg: #f5f5f5;
}

[data-theme="light"] {
  --bg: #fafafa;
  --fg: #222;
  --bar-bg: #f0f0f0;
  --bar-fg: #777;
  --bar-border: #e0e0e0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  background: var(--bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}