/* Retavon v1.0 — import once. Light is default; use data-theme="dark". */
:root,
[data-theme="light"] {
  --rv-background: #faf8f5;
  --rv-surface: #ffffff;
  --rv-surface-raised: #ffffff;
  --rv-surface-muted: #eee9e1;
  --rv-text: #202a30;
  --rv-text-muted: #59656c;
  --rv-border: #d7dde0;
  --rv-control-border: #7c878d;
  --rv-primary: #b84427;
  --rv-primary-hover: #96361d;
  --rv-primary-active: #7d2d18;
  --rv-on-primary: #ffffff;
  --rv-primary-soft: #fbede7;
  --rv-primary-soft-text: #96361d;
  --rv-focus: #b84427;
  --rv-success: #216a47;
  --rv-success-soft: #eaf5ee;
  --rv-warning: #805a09;
  --rv-warning-soft: #fff4d6;
  --rv-danger: #b32f39;
  --rv-danger-soft: #fcecef;
  --rv-info: #285f8f;
  --rv-info-soft: #eaf2fa;
  --rv-sidebar: #202a30;
  --rv-sidebar-text: #ffffff;
  --rv-sidebar-muted: #bac5cb;
  --rv-sidebar-selected: #354249;
  --rv-sidebar-indicator: #f28b67;
  --rv-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rv-space-1: 4px;
  --rv-space-2: 8px;
  --rv-space-3: 12px;
  --rv-space-4: 16px;
  --rv-space-6: 24px;
  --rv-space-8: 32px;
  --rv-space-12: 48px;
  --rv-space-16: 64px;
  --rv-radius-control: 8px;
  --rv-radius-card: 12px;
  --rv-radius-dialog: 16px;
  --rv-shadow: 0 4px 20px rgb(32 42 48 / 0.06);
  color-scheme: light;
}
[data-theme="dark"] {
  --rv-background: #141d22;
  --rv-surface: #1d282e;
  --rv-surface-raised: #27343b;
  --rv-surface-muted: #27343b;
  --rv-text: #f5f3ef;
  --rv-text-muted: #b5c0c6;
  --rv-border: #405059;
  --rv-control-border: #81919a;
  --rv-primary: #f28b67;
  --rv-primary-hover: #f7a181;
  --rv-primary-active: #e97851;
  --rv-on-primary: #202a30;
  --rv-primary-soft: #3b2924;
  --rv-primary-soft-text: #ffb394;
  --rv-focus: #f28b67;
  --rv-success: #8cdaad;
  --rv-success-soft: #193b2a;
  --rv-warning: #f3cf72;
  --rv-warning-soft: #3b321c;
  --rv-danger: #ffa1a8;
  --rv-danger-soft: #42242b;
  --rv-info: #9acbfa;
  --rv-info-soft: #203449;
  --rv-sidebar: #10181d;
  --rv-sidebar-text: #f5f3ef;
  --rv-sidebar-muted: #b5c0c6;
  --rv-sidebar-selected: #27343b;
  --rv-sidebar-indicator: #f28b67;
  --rv-shadow: 0 4px 20px rgb(0 0 0 / 0.22);
  color-scheme: dark;
}
.rv-root {
  font-family: var(--rv-font);
  color: var(--rv-text);
  background: var(--rv-background);
  line-height: 1.5;
}
.rv-root *,
.rv-root *::before,
.rv-root *::after {
  box-sizing: border-box;
}
.rv-root button,
.rv-root input,
.rv-root select {
  font: inherit;
}
.rv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--rv-radius-control);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease;
}
.rv-btn-primary {
  background: var(--rv-primary);
  color: var(--rv-on-primary);
}
.rv-btn-primary:hover {
  background: var(--rv-primary-hover);
}
.rv-btn-primary:active {
  background: var(--rv-primary-active);
}
.rv-btn-secondary {
  background: var(--rv-surface);
  color: var(--rv-text);
  border-color: var(--rv-control-border);
}
.rv-btn-secondary:hover {
  background: var(--rv-surface-muted);
}
.rv-btn-danger {
  background: var(--rv-danger);
  color: var(--rv-surface);
}
.rv-btn:disabled {
  background: var(--rv-surface-muted);
  color: var(--rv-text-muted);
  border-color: var(--rv-border);
  cursor: not-allowed;
}
.rv-root :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--rv-focus);
  outline-offset: 3px;
}
.rv-link {
  color: var(--rv-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rv-field {
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
}
.rv-input {
  min-height: 44px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rv-control-border);
  border-radius: var(--rv-radius-control);
  background: var(--rv-surface);
  color: var(--rv-text);
  font-weight: 400;
}
.rv-input::placeholder {
  color: var(--rv-text-muted);
  opacity: 1;
}
.rv-input[aria-invalid="true"] {
  border-color: var(--rv-danger);
}
.rv-error {
  color: var(--rv-danger);
  font-size: 14px;
}
.rv-card {
  padding: 24px;
  background: var(--rv-surface);
  border: 1px solid var(--rv-border);
  border-radius: var(--rv-radius-card);
}
.rv-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.rv-badge-success {
  color: var(--rv-success);
  background: var(--rv-success-soft);
}
.rv-badge-warning {
  color: var(--rv-warning);
  background: var(--rv-warning-soft);
}
.rv-badge-danger {
  color: var(--rv-danger);
  background: var(--rv-danger-soft);
}
.rv-badge-info {
  color: var(--rv-info);
  background: var(--rv-info-soft);
}
.rv-badge-neutral {
  color: var(--rv-text-muted);
  background: var(--rv-surface-muted);
}
.rv-table-wrap {
  overflow-x: auto;
}
.rv-root .rv-table-wrap:focus-visible {
  outline-offset: -3px;
}
.rv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.rv-table th {
  text-align: left;
  color: var(--rv-text-muted);
  font-size: 12px;
  font-weight: 600;
  background: var(--rv-surface-muted);
}
.rv-table th,
.rv-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--rv-border);
}
.rv-table .rv-number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rv-sidebar {
  background: var(--rv-sidebar);
  color: var(--rv-sidebar-text);
  padding: 24px 16px;
}
.rv-nav-item {
  display: block;
  min-height: 44px;
  padding: 10px 12px;
  border-left: 3px solid transparent;
  border-radius: 6px;
  color: var(--rv-sidebar-muted);
  text-decoration: none;
}
.rv-nav-item:hover {
  color: var(--rv-sidebar-text);
  background: var(--rv-sidebar-selected);
}
.rv-nav-item[aria-current="page"] {
  color: var(--rv-sidebar-text);
  background: var(--rv-sidebar-selected);
  border-left-color: var(--rv-sidebar-indicator);
  font-weight: 600;
}
.rv-muted {
  color: var(--rv-text-muted);
}
.rv-number {
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .rv-root *,
  .rv-root *::before,
  .rv-root *::after {
    transition: none !important;
    animation: none !important;
  }
}