:root,
[data-theme="light"] {
  color-scheme: light;

  --color-background: #f7f8fa;
  --color-surface: #ffffff;
  --color-surface-soft: #eef2f7;
  --color-surface-raised: #ffffff;
  --color-border: #d8dee8;
  --color-border-strong: #b8c2d0;

  --color-brand-primary: #6c5ce7;
  --color-brand-support: #a78bfa;
  --color-brand-hover: #5848d6;
  --color-accent: #0f766e;
  --color-accent-hover: #115e59;

  --color-text: #172033;
  --color-text-muted: #5f6b7a;
  --color-text-inverse: #ffffff;

  --color-status-danger: #b42318;
  --color-status-danger-bg: #fde8e6;
  --color-status-danger-border: #f4b8b2;
  --color-status-warning: #9a5b00;
  --color-status-warning-bg: #fff4d8;
  --color-status-warning-border: #e9c46a;
  --color-status-ok: #0f766e;
  --color-status-ok-bg: #e2f5f1;

  --color-action-danger-bg: #b42318;
  --color-action-danger-text: #ffffff;
  --color-action-danger-hover: #8f1c14;

  --color-sidebar-bg: #151f2f;
  --color-sidebar-text: #ffffff;
  --color-sidebar-muted: #c3ccd9;
  --color-sidebar-active: rgba(255, 255, 255, 0.12);
  --color-sidebar-border: rgba(255, 255, 255, 0.24);
  --color-brand-mark-bg: #ebe7ff;
  --color-brand-mark-text: #3d2db3;

  --shadow-panel: 0 12px 28px rgba(20, 31, 45, 0.08);
}

[data-theme="dark"] {
  color-scheme: dark;

  --color-background: #101624;
  --color-surface: #182235;
  --color-surface-soft: #22304a;
  --color-surface-raised: #202b40;
  --color-border: #334156;
  --color-border-strong: #52617a;

  --color-brand-primary: #6c5ce7;
  --color-brand-support: #7b61ff;
  --color-brand-hover: #7b61ff;
  --color-accent: #22d3ee;
  --color-accent-hover: #67e8f9;

  --color-text: #f3f6fa;
  --color-text-muted: #b7c0cf;
  --color-text-inverse: #ffffff;

  --color-status-danger: #fca5a5;
  --color-status-danger-bg: #3a1d24;
  --color-status-danger-border: #7f2d35;
  --color-status-warning: #facc15;
  --color-status-warning-bg: #33280d;
  --color-status-warning-border: #7a5a13;
  --color-status-ok: #67e8f9;
  --color-status-ok-bg: #123342;

  --color-action-danger-bg: #fca5a5;
  --color-action-danger-text: #2b0b0b;
  --color-action-danger-hover: #fecaca;

  --color-sidebar-bg: #0b1020;
  --color-sidebar-text: #ffffff;
  --color-sidebar-muted: #aeb8c8;
  --color-sidebar-active: rgba(123, 97, 255, 0.22);
  --color-sidebar-border: rgba(255, 255, 255, 0.22);
  --color-brand-mark-bg: #2b2460;
  --color-brand-mark-text: #ddd6fe;

  --shadow-panel: 0 12px 28px rgba(0, 0, 0, 0.28);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-background: #101624;
    --color-surface: #182235;
    --color-surface-soft: #22304a;
    --color-surface-raised: #202b40;
    --color-border: #334156;
    --color-border-strong: #52617a;

    --color-brand-primary: #6c5ce7;
    --color-brand-support: #7b61ff;
    --color-brand-hover: #7b61ff;
    --color-accent: #22d3ee;
    --color-accent-hover: #67e8f9;

    --color-text: #f3f6fa;
    --color-text-muted: #b7c0cf;
    --color-text-inverse: #ffffff;

    --color-status-danger: #fca5a5;
    --color-status-danger-bg: #3a1d24;
    --color-status-danger-border: #7f2d35;
    --color-status-warning: #facc15;
    --color-status-warning-bg: #33280d;
    --color-status-warning-border: #7a5a13;
    --color-status-ok: #67e8f9;
    --color-status-ok-bg: #123342;

    --color-action-danger-bg: #fca5a5;
    --color-action-danger-text: #2b0b0b;
    --color-action-danger-hover: #fecaca;

    --color-sidebar-bg: #0b1020;
    --color-sidebar-text: #ffffff;
    --color-sidebar-muted: #aeb8c8;
    --color-sidebar-active: rgba(123, 97, 255, 0.22);
    --color-sidebar-border: rgba(255, 255, 255, 0.22);
    --color-brand-mark-bg: #2b2460;
    --color-brand-mark-text: #ddd6fe;

    --shadow-panel: 0 12px 28px rgba(0, 0, 0, 0.28);
  }
}