src/index.css

@import "tailwindcss";

@theme {
  --font-sans: "Google Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --color-bg: #121317;
  --color-surface: #212226;
  --color-surface-high: #2f3034;
  --color-text: #f8f9fc;
  --color-text-secondary: #b2bbc5;
  --color-outline: #e6eaf01f;
  --color-blue: #3c90ff;
  --color-green: #0ebc5f;
  --color-red: #ff4c45;
}

@media (prefers-color-scheme: light) {
  :root {
    --color-bg: #ffffff;
    --color-surface: #f1f3f4;
    --color-surface-high: #e8eaed;
    --color-text: #1f1f1f;
    --color-text-secondary: #5f6368;
    --color-outline: #dadce01f;
    --color-blue: #1a73e8;
    --color-green: #0d904f;
    --color-red: #d93025;
  }
}

.dark {
  --color-bg: #121317;
  --color-surface: #212226;
  --color-surface-high: #2f3034;
  --color-text: #f8f9fc;
  --color-text-secondary: #b2bbc5;
  --color-outline: #e6eaf01f;
  --color-blue: #3c90ff;
  --color-green: #0ebc5f;
  --color-red: #ff4c45;
}

.light {
  --color-bg: #ffffff;
  --color-surface: #f1f3f4;
  --color-surface-high: #e8eaed;
  --color-text: #1f1f1f;
  --color-text-secondary: #5f6368;
  --color-outline: #dadce01f;
  --color-blue: #1a73e8;
  --color-green: #0d904f;
  --color-red: #d93025;
}