:root {
  --gc-primary: #4caf50;
  --gc-primary-light: #81c784;
  --gc-primary-dark: #388e3c;
  --gc-surface: #fafafa;
  --gc-background: #f5f5f5;
  --gc-text-primary: #212121;
  --gc-text-secondary: #757575;
  --gc-border: #e0e0e0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --gc-primary: #66bb6a;
    --gc-primary-light: #81c784;
    --gc-primary-dark: #4caf50;
    --gc-surface: #1e1e1e;
    --gc-background: #121212;
    --gc-text-primary: #ffffff;
    --gc-text-secondary: #b0b0b0;
    --gc-border: #333333;
  }
}

body {
  background-color: var(--gc-background);
  color: var(--gc-text-primary);
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

.btn-primary {
  background-color: var(--gc-primary);
  color: white;
  transition: all 0.2s;
}
.btn-primary:hover {
  background-color: var(--gc-primary-dark);
  transform: translateY(-1px);
}

.screenshot-placeholder {
  background: linear-gradient(135deg, var(--gc-surface) 0%, var(--gc-background) 100%);
  border: 2px dashed var(--gc-border);
}