:root {
  color-scheme: light;
  --gsky-font-family: Arial, sans-serif;

  --gsky-color-bg: #f6f7f9;
  --gsky-color-panel: #ffffff;
  --gsky-color-text: #172033;
  --gsky-color-muted: #566174;
  --gsky-color-border: #d7dce5;
  --gsky-color-primary: #1d4ed8;
  --gsky-color-primary-hover: #1e40af;
  --gsky-color-danger: #dc2626;
  --gsky-color-focus: rgba(96, 165, 250, 0.42);
  --gsky-color-code-bg: #eef2f7;
  --gsky-color-code-text: #172033;

  --gsky-editor-bg: #111827;
  --gsky-editor-panel: #0f172a;
  --gsky-editor-text: #e5e7eb;
  --gsky-editor-muted: #8b95a7;
  --gsky-editor-border: #263244;
  --gsky-editor-highlight: rgba(250, 204, 21, 0.32);
  --gsky-editor-selection: rgba(96, 165, 250, 0.4);
  --gsky-editor-comment: #94a3b8;
  --gsky-editor-keyword: #93c5fd;
  --gsky-editor-string: #86efac;
  --gsky-editor-number: #fca5a5;

  --gsky-radius-sm: 4px;
  --gsky-radius-md: 8px;
  --gsky-space-sm: 8px;
  --gsky-space-md: 16px;

  --color-bg: var(--gsky-color-bg);
  --color-panel: var(--gsky-color-panel);
  --color-text: var(--gsky-color-text);
  --color-border: var(--gsky-color-border);
  --color-primary: var(--gsky-color-primary);
  --color-primary-hover: var(--gsky-color-primary-hover);
}

:root[data-gsky-theme="dark"] {
  color-scheme: dark;
  --gsky-color-bg: #0f172a;
  --gsky-color-panel: #172033;
  --gsky-color-text: #e5e7eb;
  --gsky-color-muted: #a7b0c0;
  --gsky-color-border: #334155;
  --gsky-color-primary: #60a5fa;
  --gsky-color-primary-hover: #3b82f6;
  --gsky-color-danger: #f87171;
  --gsky-color-focus: rgba(96, 165, 250, 0.42);
  --gsky-color-code-bg: #263244;
  --gsky-color-code-text: #e5e7eb;

  --gsky-editor-bg: #020617;
  --gsky-editor-panel: #0f172a;
  --gsky-editor-text: #e5e7eb;
  --gsky-editor-muted: #94a3b8;
  --gsky-editor-border: #334155;
  --gsky-editor-highlight: rgba(250, 204, 21, 0.32);
  --gsky-editor-selection: rgba(96, 165, 250, 0.38);
  --gsky-editor-comment: #94a3b8;
  --gsky-editor-keyword: #93c5fd;
  --gsky-editor-string: #86efac;
  --gsky-editor-number: #fca5a5;
}

:root[data-gsky-theme="light"] {
  color-scheme: light;
}