:root,
[data-ui-theme="dark"] {
  color-scheme: dark;
  --ui-color-background: #0b0f0d;
  --ui-color-backdrop-edge: #020403;
  --ui-color-canvas: #0b0f0d;
  --ui-color-surface: #111713;
  --ui-color-surface-raised: #151d18;
  --ui-color-surface-elevated: #19231d;
  --ui-color-surface-panel: rgba(15, 21, 17, 0.94);
  --ui-color-surface-module: rgba(18, 25, 21, 0.96);
  --ui-color-surface-footer: rgba(11, 15, 13, 0.98);
  --ui-color-surface-inset: #070b09;
  --ui-color-surface-icon: #101711;
  --ui-color-border-subtle: rgba(209, 222, 198, 0.13);
  --ui-color-border: rgba(211, 225, 199, 0.2);
  --ui-color-border-strong: rgba(219, 234, 207, 0.34);
  --ui-color-line: var(--ui-color-border);
  --ui-color-line-strong: var(--ui-color-border-strong);
  --ui-color-grid-line: rgba(222, 238, 211, 0.045);
  --ui-color-backdrop-vignette: rgba(0, 0, 0, 0.24);
  --ui-color-frame-spine: rgba(198, 230, 160, 0.1);
  --ui-color-frame-wash: rgba(10, 15, 12, 0.52);
  --ui-color-card-gradient-start: rgba(24, 33, 27, 0.94);
  --ui-color-card-gradient-end: rgba(10, 15, 12, 0.98);
  --ui-color-hover: rgba(190, 225, 146, 0.075);
  --ui-color-text-primary: #edf1e6;
  --ui-color-text-secondary: #b4bda9;
  --ui-color-text-muted: #7f8a7a;
  --ui-color-text: var(--ui-color-text-primary);
  --ui-color-muted: var(--ui-color-text-muted);
  --ui-color-dim: #4e594d;
  --ui-color-accent: #c7ef5f;
  --ui-color-accent-soft: rgba(199, 239, 95, 0.12);
  --ui-color-accent-contrast: #0a100b;
  --ui-color-success: #9fd85a;
  --ui-color-ok: var(--ui-color-success);
  --ui-color-warning: #d99a3a;
  --ui-color-critical: #f04463;
  --ui-color-danger: var(--ui-color-critical);
  --ui-color-info: #86a8bd;
  --ui-color-stale: #8a9a93;
  --ui-color-unavailable: #6f7a76;
  --ui-font-mono: "IBM Plex Mono", "Roboto Mono", "SFMono-Regular", Consolas, monospace;
  --ui-font-display: "Teko", "IBM Plex Mono", "Roboto Mono", monospace;
  --ui-space-1: 0.25rem;
  --ui-space-2: 0.5rem;
  --ui-space-3: 0.75rem;
  --ui-space-4: 1rem;
  --ui-space-5: 1.25rem;
  --ui-space-6: 1.5rem;
  --ui-radius-none: 0;
  --ui-border: 1px solid var(--ui-color-border);
  --ui-border-strong: 1px solid var(--ui-color-border-strong);
  --ui-shadow-hard: 0 0 0 1px rgba(199, 239, 95, 0.1) inset;
  --ui-shadow-inset-panel:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32);
  --ui-z-base: 0;
  --ui-z-panel: 1;
  --ui-z-overlay: 10;
  --ui-density-card-min: 9.75rem;
  --ui-focus-ring: 0 0 0 2px var(--ui-color-canvas), 0 0 0 4px var(--ui-color-accent);
}

[data-ui-theme="light"] {
  color-scheme: light;
  --ui-color-background: #eef2e7;
  --ui-color-backdrop-edge: #d7decf;
  --ui-color-canvas: #eef2e7;
  --ui-color-surface: #f9fbf3;
  --ui-color-surface-raised: #f1f5ea;
  --ui-color-surface-elevated: #ffffff;
  --ui-color-surface-panel: rgba(250, 252, 245, 0.94);
  --ui-color-surface-module: rgba(252, 254, 247, 0.96);
  --ui-color-surface-footer: rgba(239, 243, 233, 0.98);
  --ui-color-surface-inset: #e1e8d9;
  --ui-color-surface-icon: #edf3e6;
  --ui-color-border-subtle: rgba(32, 43, 29, 0.12);
  --ui-color-border: rgba(32, 43, 29, 0.22);
  --ui-color-border-strong: rgba(32, 43, 29, 0.38);
  --ui-color-line: var(--ui-color-border);
  --ui-color-line-strong: var(--ui-color-border-strong);
  --ui-color-grid-line: rgba(32, 43, 29, 0.055);
  --ui-color-backdrop-vignette: rgba(31, 44, 29, 0.08);
  --ui-color-frame-spine: rgba(32, 43, 29, 0.09);
  --ui-color-frame-wash: rgba(255, 255, 255, 0.54);
  --ui-color-card-gradient-start: rgba(255, 255, 255, 0.96);
  --ui-color-card-gradient-end: rgba(229, 235, 221, 0.92);
  --ui-color-hover: rgba(54, 81, 25, 0.065);
  --ui-color-text-primary: #11180f;
  --ui-color-text-secondary: #3f4b3b;
  --ui-color-text-muted: #667260;
  --ui-color-text: var(--ui-color-text-primary);
  --ui-color-muted: var(--ui-color-text-muted);
  --ui-color-dim: #7e8878;
  --ui-color-accent: #4f7200;
  --ui-color-accent-soft: rgba(79, 114, 0, 0.11);
  --ui-color-accent-contrast: #ffffff;
  --ui-color-success: #436f00;
  --ui-color-ok: var(--ui-color-success);
  --ui-color-warning: #915c00;
  --ui-color-critical: #b7173c;
  --ui-color-danger: var(--ui-color-critical);
  --ui-color-info: #476a7c;
  --ui-color-stale: #596b64;
  --ui-color-unavailable: #68726c;
  --ui-shadow-hard: 0 0 0 1px rgba(79, 114, 0, 0.14) inset;
  --ui-shadow-inset-panel:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(31, 44, 29, 0.08);
}

html {
  background: var(--ui-color-canvas);
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 50% 12%, transparent 0 42%, var(--ui-color-backdrop-vignette) 100%),
    linear-gradient(var(--ui-color-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ui-color-grid-line) 1px, transparent 1px),
    var(--ui-color-canvas);
  background-size: auto, 40px 40px, 40px 40px, auto;
  color: var(--ui-color-text);
  font-family: var(--ui-font-mono);
  text-rendering: geometricPrecision;
}

button,
input,
textarea,
select {
  font: inherit;
}

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 0;
  box-shadow: var(--ui-focus-ring);
}

a {
  color: inherit;
}

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