:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1c1c1e;
  --bg-elevated: #2c2c2e;
  --bg-grouped: #1c1c1e;
  --separator: rgba(255, 255, 255, 0.08);
  --text: #f5f5f7;
  --text-muted: #8e8e93;
  --sent: #ff9500;
  --sent-text: #1c1c1e;
  --received: #2c2c2e;
  --received-text: #f5f5f7;
  --button: #ff9500;
  --button-text: #1c1c1e;
  --tab-active: #ff9500;
  --tab-inactive: #8e8e93;
  --accent: #ff2d55;
  --tabbar: rgba(28, 28, 30, 0.92);
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-elevated: #ffffff;
  --bg-grouped: #f2f2f7;
  --separator: rgba(28, 28, 30, 0.1);
  --text: #1c1c1e;
  --text-muted: #8e8e93;
  --sent: #007aff;
  --sent-text: #ffffff;
  --received: #e9e9eb;
  --received-text: #1c1c1e;
  --button: #ffb340;
  --button-text: #1c1c1e;
  --tab-active: #ffb340;
  --tab-inactive: #8e8e93;
  --accent: #ff2d55;
  --tabbar: rgba(255, 255, 255, 0.92);
  --shadow: 0 16px 40px rgba(28, 28, 30, 0.08);
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}