:root {
  --primary: #4e8dff;
  --primary-hover: #3b7af0;
  --primary-text: #1e5ad7;
  --on-primary: #121212;
  --on-accent: #121212;
  --ink: #121212;
  --muted: #3f3f3f;
  --paper: #ebebeb;
  --panel: #ffffff;
  --selected: #f0f0f0;
  --border: #d0d0d0;
  --danger: #c0392b;
  --scrim: rgba(0, 0, 0, 0.45);
  --radius-control: 12px;
  --radius-card: 16px;
  --radius-pill: 999px;
  --control-h: 44px;
  --content-max: 800px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --shadow-card: 0 8px 28px rgba(26, 26, 26, 0.08);
}

html[data-theme='dark'] {
  --primary: #4e8dff;
  --primary-hover: #6ba0ff;
  --primary-text: #8fb5ff;
  --on-primary: #121212;
  --on-accent: #121212;
  --ink: #f5f5f5;
  --muted: #a3a3a3;
  --paper: #121212;
  --panel: #1c1c1c;
  --selected: #2a2a2a;
  --border: #2f2f2f;
  --danger: #e5484d;
  --shadow-card: 0 10px 32px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --primary-hover: #6ba0ff;
    --primary-text: #8fb5ff;
    --on-primary: #121212;
    --on-accent: #121212;
    --ink: #f5f5f5;
    --muted: #a3a3a3;
    --paper: #121212;
    --panel: #1c1c1c;
    --selected: #2a2a2a;
    --border: #2f2f2f;
    --danger: #e5484d;
    --shadow-card: 0 10px 32px rgba(0, 0, 0, 0.4);
  }
}

.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 1000;
  min-height: var(--control-h);
  padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  display: inline-flex;
  align-items: center;
  background: var(--panel);
  color: var(--primary-text);
  border: 1px solid var(--border);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.nav-locale,
.nav-theme,
.brand,
footer a,
footer button {
  min-height: var(--control-h);
}

footer a,
footer button {
  display: inline-flex;
  align-items: center;
}