:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --text: #1d1d1f;
  --text-secondary: #6e6e73;
  --accent: #0071e3;
  --accent-hover: #0060c0;
  --error: #e53935;
  --success: #2e7d32;
  --warning: #f57c00;
  --border: #d2d2d7;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --transition: 200ms ease;
  color-scheme: light dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1c1e;
    --surface: #2c2c2e;
    --text: #f5f5f7;
    --text-secondary: #98989d;
    --accent: #0a84ff;
    --accent-hover: #409cff;
    --error: #ff453a;
    --success: #30d158;
    --warning: #ff9f0a;
    --border: #38383a;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
}

html, body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
}

/* View Transitions */
::view-transition-old(main-content),
::view-transition-new(main-content) {
  animation-duration: 300ms;
  animation-timing-function: ease;
}

::view-transition-old(sensor-grid),
::view-transition-new(sensor-grid) {
  animation-duration: 150ms;
  animation-timing-function: ease;
}

::view-transition-new(sensor-grid) {
  animation-delay: 100ms;
}