:root {
  --bg: #effbf9;
  --surface: rgba(255, 255, 255, 0.78);
  --surface-solid: #ffffff;
  --text: #102522;
  --muted: #4f6965;
  --line: rgba(0, 121, 111, 0.18);
  --brand: #00796f;
  --brand-2: #0b66d6;
  --brand-soft: #c9f3ed;
  --focus: #0b66d6;
  --glow-purple: rgba(0, 121, 111, 0.24);
  --glow-blue: rgba(11, 102, 214, 0.20);
  --grid-line: rgba(0, 121, 111, 0.06);
}

:root[data-theme="dark"] {
  --bg: #031a19;
  --surface: rgba(13, 38, 36, 0.82);
  --surface-solid: #102b29;
  --text: #ecfffc;
  --muted: #b8d4d0;
  --line: rgba(88, 213, 203, 0.25);
  --brand: #58d5cb;
  --brand-2: #68a8ff;
  --brand-soft: rgba(0, 121, 111, 0.32);
  --focus: #68a8ff;
  --glow-purple: rgba(0, 121, 111, 0.34);
  --glow-blue: rgba(11, 102, 214, 0.26);
  --grid-line: rgba(88, 213, 203, 0.06);
}

.brand-mark {
  width: 44px;
  height: 44px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.brand-mark img { width: 100%; height: 100%; object-fit: contain; }