:where(.romptn-admin, .romptn-popup-root) {
  --romptn-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --romptn-font-base: 16px;
  --romptn-font-scale: 1;
  --romptn-font-xxs: calc((var(--romptn-font-base) * var(--romptn-font-scale)) - 3px);
  --romptn-font-xs: calc((var(--romptn-font-base) * var(--romptn-font-scale)) - 2px);
  --romptn-font-sm: calc((var(--romptn-font-base) * var(--romptn-font-scale)) - 1px);
  --romptn-font-md: calc(var(--romptn-font-base) * var(--romptn-font-scale));
  --romptn-font-lg: calc((var(--romptn-font-base) * var(--romptn-font-scale)) + 2px);
  --romptn-font-xl: calc((var(--romptn-font-base) * var(--romptn-font-scale)) + 4px);
  --romptn-font-2xl: calc((var(--romptn-font-base) * var(--romptn-font-scale)) + 14px);
  --romptn-font-close: calc((var(--romptn-font-base) * var(--romptn-font-scale)) + 12px);
  --romptn-space-base: 8px;
  --romptn-space-1: calc(var(--romptn-space-base) * 0.5);
  --romptn-space-2: calc(var(--romptn-space-base) * 1);
  --romptn-space-3: calc(var(--romptn-space-base) * 1.5);
  --romptn-space-4: calc(var(--romptn-space-base) * 2);
  --romptn-space-5: calc(var(--romptn-space-base) * 2.5);
  --romptn-space-6: calc(var(--romptn-space-base) * 3);

  --romptn-color-bg: #f5f6fa;
  --romptn-color-surface: #ffffff;
  --romptn-color-surface-alt: #fafbff;
  --romptn-color-surface-hover: #f9fbff;
  --romptn-color-border: #e3e6ef;
  --romptn-color-text: #1f2937;
  --romptn-color-text-muted: #6b7280;
  --romptn-color-text-subtle: #444444;
  --romptn-color-accent: #0b5fff;
  --romptn-color-accent-dark: #0847c2;
  --romptn-color-on-accent: #ffffff;
  --romptn-color-accent-focus: rgba(11, 95, 255, 0.15);
  --romptn-color-overlay: rgba(0, 0, 0, 0.6);
  --romptn-color-note-bg: rgba(11, 95, 255, 0.08);
  --romptn-color-note-border: rgba(11, 95, 255, 0.2);
  --romptn-color-pill-bg: rgba(11, 95, 255, 0.12);
  --romptn-color-success: #047857;
  --romptn-color-success-bg: rgba(16, 185, 129, 0.12);
  --romptn-color-success-border: rgba(16, 185, 129, 0.3);
  --romptn-color-danger: #b91c1c;
  --romptn-color-danger-bg: rgba(239, 68, 68, 0.1);
  --romptn-color-danger-border: rgba(239, 68, 68, 0.3);
  --romptn-color-preview-bg: #0f172a;
  --romptn-color-preview-text: #ffffff;
  --romptn-color-preview-muted: rgba(255, 255, 255, 0.8);
  --romptn-color-preview-muted-strong: rgba(255, 255, 255, 0.7);
  --romptn-color-preview-meta: rgba(255, 255, 255, 0.65);
  --romptn-shadow-card: 0 12px 24px rgba(15, 23, 42, 0.08);
  --romptn-shadow-modal: 0 20px 40px rgba(0, 0, 0, 0.25);
  --romptn-radius-card: 12px;
  --romptn-radius-panel: 10px;
  --romptn-radius-input: 8px;
  --romptn-radius-pill: 999px;
  --romptn-radius-modal: 12px;
  --romptn-radius-preview: 14px;

  /* mania */
  --mania-color-surface: #1A0B24;
  --mania-color-text: #ffffff;
  --mania-color-text-muted: #B5B5D1;
  --mania-color-accent: #9B4DFF;
  --mania-color-accent-dark: #7E35DB;
}