:root {
  color-scheme: light;
  --surface-0: #f4f4f2;
  --surface-1: #fcfcfb;
  --border: #e3e2de;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #7a7974;
  --accent: #2a78d6;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(42, 120, 214, 0.12);
  --series-1: #2a78d6;
  --danger: #c4314b;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Consolas, monospace;
  --radius: 10px;
  --radius-small: 6px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --content-width: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --surface-0: #111110;
    --surface-1: #1a1a19;
    --border: #2e2e2c;
    --text-primary: #f0efec;
    --text-secondary: #c3c2b7;
    --text-muted: #8e8d86;
    --accent: #3987e5;
    --accent-contrast: #ffffff;
    --accent-soft: rgba(57, 135, 229, 0.18);
    --series-1: #3987e5;
    --danger: #ef6a80;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--surface-0);
}

h1,
h2,
p {
  margin: 0;
}

a {
  color: inherit;
}

/* Shared UI conventions */

.ui-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.ui-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.ui-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--text-primary);
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
}

.ui-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.ui-button {
  padding: var(--space-2) var(--space-4);
  font: inherit;
  font-weight: 600;
  color: var(--accent-contrast);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-small);
  cursor: pointer;
}

.ui-button:disabled {
  opacity: 0.6;
  cursor: wait;
}

.ui-button-ghost {
  color: var(--text-secondary);
  background: transparent;
  border-color: transparent;
}

.ui-button-ghost:hover {
  color: var(--text-primary);
}

.ui-error {
  color: var(--danger);
  font-size: 14px;
}

.ui-error:empty {
  display: none;
}

.ui-muted {
  color: var(--text-muted);
}