:root {
  color-scheme: light;
  --g-blue: #4285f4;
  --g-red: #ea4335;
  --g-yellow: #fbbc04;
  --g-green: #34a853;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-muted: #f8f9fa;
  --surface-soft: #f1f3f4;
  --text: #202124;
  --text-muted: #5f6368;
  --text-subtle: #80868b;
  --border: #dfe1e5;
  --border-strong: #dadce0;
  --footer-bg: #f2f2f2;
  --footer-border: #dadce0;
  --toast-bg: #323232;
  --toast-text: #ffffff;
  --font-sans: Arial, sans-serif;
  --font-logo: 'Product Sans', Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #202124;
    --surface: #303134;
    --surface-muted: #303134;
    --surface-soft: #3c4043;
    --text: #e8eaed;
    --text-muted: #bdc1c6;
    --text-subtle: #9aa0a6;
    --border: #5f6368;
    --border-strong: #3c4043;
    --footer-bg: #171717;
    --footer-border: #3c4043;
    --toast-bg: #e8eaed;
    --toast-text: #202124;
  }
}