:root {
  --tg-bg-color: var(--tg-theme-bg-color, #ffffff);
  --tg-secondary-bg-color: var(--tg-theme-secondary-bg-color, #f8f9fa);
  --tg-text-color: var(--tg-theme-text-color, #000000);
  --tg-hint-color: var(--tg-theme-hint-color, #999999);
  --tg-link-color: var(--tg-theme-link-color, #2481cc);
  --tg-button-color: var(--tg-theme-button-color, #2481cc);
  --tg-button-text-color: var(--tg-theme-button-text-color, #ffffff);
  --tg-border-color: var(--tg-theme-bg-color, #e1e1e1);
  --tg-shadow-color: rgba(0, 0, 0, 0.1);
  --tg-radius: 8px;
  --tg-spacing-xs: 4px;
  --tg-spacing-sm: 8px;
  --tg-spacing-md: 12px;
  --tg-spacing-lg: 16px;
  --tg-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tg-bg-color: var(--tg-theme-bg-color, #18222d);
    --tg-secondary-bg-color: var(--tg-theme-secondary-bg-color, #212f3d);
    --tg-text-color: var(--tg-theme-text-color, #ffffff);
    --tg-hint-color: var(--tg-theme-hint-color, #999999);
    --tg-link-color: var(--tg-theme-link-color, #70b4ff);
    --tg-button-color: var(--tg-theme-button-color, #70b4ff);
    --tg-button-text-color: var(--tg-theme-button-text-color, #000000);
    --tg-border-color: var(--tg-theme-bg-color, #3a4a5c);
    --tg-shadow-color: rgba(0, 0, 0, 0.3);
  }
}