:root {
  --ud-brand-950: #050b15;
  --ud-brand-900: #07111f;
  --ud-brand-800: #0d1b2d;
  --ud-brand-700: #10243b;
  --ud-brand-600: #142a43;
  --ud-accent: #35d7ff;
  --ud-accent-strong: #00aeef;
  --ud-success: #0e7b54;
  --ud-success-soft: #e6f7ef;
  --ud-warning: #946000;
  --ud-warning-soft: #fff4da;
  --ud-danger: #a6192e;
  --ud-danger-soft: #ffe2e7;
  --ud-info: #1769aa;
  --ud-info-soft: #e7f1ff;
  --ud-surface: #ffffff;
  --ud-surface-raised: #f6f7f8;
  --ud-border: #d6d9de;
  --ud-text: #111827;
  --ud-text-muted: #52606d;
  --ud-space-1: 4px;
  --ud-space-2: 8px;
  --ud-space-3: 12px;
  --ud-space-4: 16px;
  --ud-space-5: 24px;
  --ud-space-6: 32px;
  --ud-radius-sm: 6px;
  --ud-radius-md: 10px;
  --ud-radius-lg: 16px;
  --ud-radius-pill: 999px;
  --ud-font-ui: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ud-font-mono: SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --ud-motion-fast: 120ms;
  --ud-motion-normal: 200ms;
}

[data-ud-theme="dark"] {
  --ud-surface: #07111f;
  --ud-surface-raised: #0d1b2d;
  --ud-border: #223653;
  --ud-text: #eaf2ff;
  --ud-text-muted: #91a7c5;
}

.ud-status {
  display: inline-flex;
  align-items: center;
  gap: var(--ud-space-2);
  min-height: 28px;
  padding: 3px 10px;
  border: 1px solid var(--ud-border);
  border-radius: var(--ud-radius-pill);
  color: var(--ud-text);
  background: var(--ud-surface-raised);
  font: 600 12px/1.2 var(--ud-font-ui);
}

.ud-status[data-status="success"] { color: var(--ud-success); background: var(--ud-success-soft); }
.ud-status[data-status="warning"] { color: var(--ud-warning); background: var(--ud-warning-soft); }
.ud-status[data-status="danger"] { color: var(--ud-danger); background: var(--ud-danger-soft); }
.ud-status[data-status="info"] { color: var(--ud-info); background: var(--ud-info-soft); }

.ud-focusable:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ud-accent) 65%, transparent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}