@layer orvel {
  :where(:root, [data-orvel-theme="light"], .ov-theme) {
    --ov-bg: #f6f8fc;
    --ov-surface: #fff;
    --ov-text: #111827;
    --ov-muted: #526078;
    --ov-border: #dfe5ef;
    --ov-accent: #2457ff;
    --ov-accent-hover: #1744da;
    --ov-accent-soft: #eaf0ff;
    --ov-on-accent: #fff;
    --ov-success: #146342;
    --ov-success-soft: #eaf7ef;
    --ov-warning: #865200;
    --ov-warning-soft: #fff5dd;
    --ov-danger: #b42336;
    --ov-danger-soft: #fff0f1;
    --ov-font-sans: "Inter", Arial, sans-serif;
    --ov-font-mono: "Inter", Arial, sans-serif;
    --ov-space-1: 4px;
    --ov-space-2: 8px;
    --ov-space-3: 12px;
    --ov-space-4: 16px;
    --ov-space-5: 20px;
    --ov-space-6: 24px;
    --ov-space-8: 32px;
    --ov-space-10: 40px;
    --ov-space-12: 48px;
    --ov-space-16: 64px;
    --ov-space-24: 96px;
    --ov-radius: 8px;
    --ov-radius-button: 999px;
    --ov-radius-panel: 12px;
    --ov-focus: 0 0 0 3px #2457ff40;
    --ov-shadow: 0 4px 18px #11182708;
    --ov-motion: 150ms;
    --ov-control-height: 44px;
    --ov-table-padding: 16px;
    --ov-content-width: 1200px;
  }
  :where([data-orvel-density="compact"]) {
    --ov-control-height: 36px;
    --ov-table-padding: 12px;
  }
}