:root {
  color-scheme: light;

  --ui-color-primary: #7c66f7;
  --ui-color-success: #22c55e;
  --ui-color-warning: #f59e0b;
  --ui-color-destructive: #ef4444;
  --ui-color-info: #4a6298;
  --ui-color-primary-subtle: color-mix(in srgb, var(--ui-color-primary) 14%, transparent);
  --ui-color-success-subtle: color-mix(in srgb, var(--ui-color-success) 14%, transparent);
  --ui-color-warning-subtle: color-mix(in srgb, var(--ui-color-warning) 16%, transparent);
  --ui-color-destructive-subtle: color-mix(in srgb, var(--ui-color-destructive) 14%, transparent);
  --ui-color-info-subtle: color-mix(in srgb, var(--ui-color-info) 14%, transparent);

  --ui-color-background: #ffffff;
  --ui-color-foreground: #09090b;
  --ui-color-card: #ffffff;
  --ui-color-card-foreground: #09090b;
  --ui-color-muted: #f4f4f5;
  --ui-color-muted-foreground: #71717a;
  --ui-color-accent: #f4f4f5;
  --ui-color-accent-foreground: #09090b;
  --ui-color-border: #e4e4e7;
  --ui-color-border-soft: #ececf1;
  --ui-color-border-strong: #d4d4d8;
  --ui-color-input: #ffffff;
  --ui-color-overlay: rgba(9, 9, 11, 0.45);
  --ui-color-inverse: #09090b;
  --ui-color-ring: #18181b;
  --ui-color-on-brand: #ffffff;

  --ui-text-primary: var(--ui-color-foreground);
  --ui-text-secondary: #3f3f46;
  --ui-text-muted: #71717a;
  --ui-text-placeholder: #a1a1aa;
  --ui-text-disabled: #a1a1aa;
  --ui-text-on-brand: var(--ui-color-on-brand);

  --el-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --el-font-size-base: 14px;

  --el-border-radius-base: var(--ui-radius-control);
  --el-box-shadow: rgba(0, 0, 0, 0.05) 1px 1px 5px 1px;
  --el-menu-base-level-padding: 15px;
  --el-popover-border-radius: 4px;

  --el-color-primary: #5f4ecf;
  --el-color-primary-rgb: 95, 78, 207;
  --el-color-primary-light-3: #8f83dd;
  --el-color-primary-light-5: #afa7e7;
  --el-color-primary-light-7: #cfcaf1;
  --el-color-primary-light-8: #dfdcf5;
  --el-color-primary-light-9: #efedfa;
  --el-color-primary-light-10: #f7f6fd;
  --el-color-primary-dark-2: #4c3ea6;

  --el-bg-color: #ffffff;
  --el-bg-color-page: var(--ui-color-muted);
  --el-bg-color-overlay: #ffffff;
  --el-fill-color: #f8f8fa;
  --el-fill-color-light: #f4f4f5;
  --el-fill-color-lighter: #f7f7f8;
  --el-fill-color-blank: #ffffff;

  --el-text-color-primary: var(--ui-text-primary);
  --el-text-color-regular: var(--ui-text-secondary);
  --el-text-color-secondary: var(--ui-text-muted);
  --el-text-color-placeholder: var(--ui-text-placeholder);
  --el-text-color-disabled: var(--ui-text-disabled);

  --el-border-color: #e4e4e7;
  --el-border-color-light: #ececf1;
  --el-border-color-lighter: #f1f1f4;
  --el-border-color-extra-light: #f4f4f5;

  --ui-font-heading: Manrope, var(--el-font-family);
  --ui-font-body: var(--el-font-family);
  --ui-font-mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;

  --ui-radius-sm: 4px;
  --ui-radius-control: 8px;
  --ui-radius-card: 12px;
  --ui-radius-modal: 24px;
  --ui-radius-pill: 9999px;
  --ui-body-radius: 16px 16px 0 0;

  --ui-space-xs: 4px;
  --ui-space-sm: 8px;
  --ui-space-md: 12px;
  --ui-space-base: 16px;
  --ui-space-lg: 20px;
  --ui-space-xl: 24px;
  --ui-space-2xl: 32px;
  --ui-space-3xl: 48px;
  --ui-space-inline: var(--ui-space-sm);
  --ui-space-control: var(--ui-space-md);
  --ui-space-card: var(--ui-space-lg);
  --ui-space-section: var(--ui-space-xl);

  --ui-shadow-xs: 0 1px 2px rgb(0 0 0 / 4%);
  --ui-shadow-card: 0 4px 10px rgba(9, 9, 11, 0.08);
  --ui-shadow-pop: 0 8px 24px rgba(9, 9, 11, 0.12);

  --ui-transition-fast: 150ms ease-out;
  --ui-transition-base: 200ms ease-out;

  --ui-layout-shell-bg: linear-gradient(133deg, #daeeff 0%, #f5faff 10%, #f9faff 58%, #fcfcff 100%);

  --ui-bg-page: var(--ui-color-background);
  --ui-bg-card: var(--ui-color-card);
  --ui-bg-muted: var(--ui-color-muted);
  --ui-bg-disabled: #fafafb;
  --ui-bg-overlay: var(--ui-color-overlay);
  --ui-bg-inverse: var(--ui-color-inverse);

  --ui-border-default: var(--ui-color-border);
  --ui-border-soft: var(--ui-color-border-soft);
  --ui-border-strong: var(--ui-color-border-strong);
  --ui-ring: var(--ui-color-ring);

  --ui-topnav-bg: #2d2241;
  --ui-topnav-accent: #2d2240;
  --ui-topnav-foreground: #f0edf5;
  --ui-topnav-muted: #e1daed;
  --ui-topnav-border: rgba(240, 237, 245, 0.12);
  --ui-topnav-hover: rgba(240, 237, 245, 0.12);
  --ui-topnav-surface: rgba(240, 237, 245, 0.08);
  --ui-topnav-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
  --ui-avatar-bg: #7c3aed;
  --ui-topnav-active-bg: #312870;
  --ui-topnav-active-fg: #c4bdff;

  --ui-sidebar-bg: #fafafa;
  --ui-sidebar-accent: #f4f4f5;
  --ui-sidebar-foreground: #09090b;
  --ui-sidebar-border: #e4e4e7;
  --ui-sidebar-active-bg: #e4e4e7;
  --ui-sidebar-active-fg: #18181b;
  --ui-sidebar-hover-bg: #f0f0f1;

  --ui-badge-purple-bg: #f2eef8;
  --ui-badge-purple-fg: #6a4e9a;
  --ui-badge-blue-bg: #eef1f8;
  --ui-badge-blue-fg: #4a6298;
  --ui-badge-green-bg: #eef5f0;
  --ui-badge-green-fg: #3a7252;
  --ui-badge-orange-bg: #f8f1ec;
  --ui-badge-orange-fg: #8a5e38;
  --ui-badge-yellow-bg: #f7f4ea;
  --ui-badge-yellow-fg: #7a6228;

  --ui-table-header-bg: #f4f4f5;
  --ui-table-row-bg: var(--ui-bg-card);
  --ui-table-row-alt-bg: #fafafa;
}

html.dark {
  color-scheme: dark;

  --ui-color-primary: #a99aff;
  --ui-color-success: #4ade80;
  --ui-color-warning: #fbbf24;
  --ui-color-destructive: #f87171;
  --ui-color-info: #7a9ac8;

  --ui-color-background: #09090b;
  --ui-color-foreground: #fafafa;
  --ui-color-card: #18181b;
  --ui-color-card-foreground: #fafafa;
  --ui-color-muted: #27272a;
  --ui-color-muted-foreground: #8b93a5;
  --ui-color-accent: #27272a;
  --ui-color-accent-foreground: #fafafa;
  --ui-color-border: #323238;
  --ui-color-border-soft: #27272a;
  --ui-color-border-strong: #52525b;
  --ui-color-input: #18181b;
  --ui-color-overlay: rgba(0, 0, 0, 0.5);
  --ui-color-inverse: #fafafa;
  --ui-color-ring: #d4d4d8;
  --ui-color-on-brand: #f0edf5;

  --ui-text-primary: var(--ui-color-foreground);
  --ui-text-secondary: #d4d4d8;
  --ui-text-muted: var(--ui-color-muted-foreground);
  --ui-text-placeholder: #71717a;
  --ui-text-disabled: #71717a;
  --ui-text-on-brand: var(--ui-color-on-brand);

  --el-color-primary: rgb(169, 154, 255);
  --el-color-primary-rgb: 169,154,255;
  --el-color-primary-light-3: rgba(169,154,255, 0.8);
  --el-color-primary-light-5: rgba(169,154,255, 0.6);
  --el-color-primary-light-7: rgba(169,154,255, 0.4);
  --el-color-primary-light-8: rgba(169,154,255, 0.2);
  --el-color-primary-light-9: rgba(169,154,255, 0.1);
  --el-color-primary-light-10: rgba(169,154,255, 0.05);
  --el-color-primary-dark-2: #6359c6;

  --el-bg-color: #09090b;
  --el-bg-color-page: var(--ui-color-muted);
  --el-bg-color-overlay: #18181b;
  --el-fill-color: #303030;
  --el-fill-color-light: #27272a;
  --el-fill-color-lighter: #323238;
  --el-fill-color-blank: #18181b;

  --el-text-color-primary: var(--ui-text-primary);
  --el-text-color-regular: var(--ui-text-secondary);
  --el-text-color-secondary: var(--ui-text-muted);
  --el-text-color-placeholder: var(--ui-text-placeholder);
  --el-text-color-disabled: var(--ui-text-disabled);

  --el-border-color: #323238;
  --el-border-color-light: #27272a;
  --el-border-color-lighter: #3f3f46;
  --el-border-color-extra-light: #323238;

  --ui-layout-shell-bg: linear-gradient(180deg, #09090b 0%, #111114 18%, #09090b 100%);

  --ui-bg-page: var(--ui-color-background);
  --ui-bg-card: var(--ui-color-card);
  --ui-bg-muted: var(--ui-color-muted);
  --ui-bg-disabled: #202024;
  --ui-bg-overlay: var(--ui-color-overlay);
  --ui-bg-inverse: var(--ui-color-inverse);

  --ui-border-default: var(--ui-color-border);
  --ui-border-soft: var(--ui-color-border-soft);
  --ui-border-strong: var(--ui-color-border-strong);
  --ui-ring: var(--ui-color-ring);

  --ui-topnav-bg: #2d2241;
  --ui-topnav-accent: #2d2240;
  --ui-topnav-foreground: #f0edf5;
  --ui-topnav-muted: #e1daed;
  --ui-topnav-border: rgba(240, 237, 245, 0.12);
  --ui-topnav-hover: rgba(240, 237, 245, 0.12);
  --ui-topnav-surface: rgba(240, 237, 245, 0.08);
  --ui-topnav-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);

  --ui-sidebar-bg: #18181b;
  --ui-sidebar-accent: #27272a;
  --ui-sidebar-foreground: #fafafa;
  --ui-sidebar-border: #27272a;
  --ui-sidebar-active-bg: #27272a;
  --ui-sidebar-active-fg: #fafafa;
  --ui-sidebar-hover-bg: #27272a;

  --ui-badge-purple-bg: #221838;
  --ui-badge-purple-fg: #9878c8;
  --ui-badge-blue-bg: #1c2438;
  --ui-badge-blue-fg: #7a9ac8;
  --ui-badge-green-bg: #1a2820;
  --ui-badge-green-fg: #5a9272;
  --ui-badge-orange-bg: #2a1c12;
  --ui-badge-orange-fg: #b07848;
  --ui-badge-yellow-bg: #261e0c;
  --ui-badge-yellow-fg: #a08838;

  --ui-table-header-bg: #1f1f22;
  --ui-table-row-bg: var(--ui-bg-card);
  --ui-table-row-alt-bg: #111114;
}