:root {
  color-scheme: light;
  --ui-color-bg: #f7f9fc;
  --ui-color-surface: #ffffff;
  --ui-color-surface-alt: #eef2ff;
  --ui-color-nav: #ffffff;
  --ui-color-border: rgba(15, 23, 42, 0.1);
  --ui-color-text: #0f172a;
  --ui-color-text-muted: #475569;
  --ui-color-text-secondary: #64748b;
  --ui-color-primary: #2563eb;
  --ui-color-primary-strong: #1d4ed8;
  --ui-color-accent: #0ea5e9;
  --ui-color-primary-soft: rgba(37, 99, 235, 0.15);
  --ui-color-success: #059669;
  --ui-color-warning: #d97706;
  --ui-color-danger: #dc2626;
  --ui-color-focus: #2563eb;
  --ui-shadow-color: rgba(15, 23, 42, 0.12);
  --ui-radius-sm: 0.5rem;
  --ui-radius-md: 0.75rem;
  --ui-radius-lg: 1rem;
  --ui-space-1: 0.25rem;
  --ui-space-2: 0.5rem;
  --ui-space-3: 0.75rem;
  --ui-space-4: 1rem;
  --ui-space-5: 1.5rem;
  --ui-page-gutter: clamp(0.75rem, 2vw, 1.5rem);
  --ui-touch-target: 2.75rem;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ui-color-bg: #020617;
  --ui-color-surface: #0f172a;
  --ui-color-surface-alt: #172033;
  --ui-color-nav: #0b1220;
  --ui-color-border: rgba(148, 163, 184, 0.22);
  --ui-color-text: #e2e8f0;
  --ui-color-text-muted: #94a3b8;
  --ui-color-text-secondary: #cbd5e1;
  --ui-color-primary: #60a5fa;
  --ui-color-primary-strong: #3b82f6;
  --ui-color-accent: #38bdf8;
  --ui-color-primary-soft: rgba(56, 189, 248, 0.18);
  --ui-color-success: #34d399;
  --ui-color-warning: #fbbf24;
  --ui-color-danger: #f87171;
  --ui-color-focus: #7dd3fc;
  --ui-shadow-color: rgba(2, 6, 23, 0.6);
}

.ui-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}