:root {
  color-scheme: light dark;
  --cp-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cp-color-page: #f3f7fa;
  --cp-color-surface: #ffffff;
  --cp-color-surface-soft: #f7fafc;
  --cp-color-text: #111a22;
  --cp-color-muted: #5f6d78;
  --cp-color-border: #d7e1e9;
  --cp-color-border-strong: #bfceda;
  --cp-color-hover: #edf5f9;
  --cp-color-brand: #0b6f95;
  --cp-color-brand-hover: #0a5f81;
  --cp-color-brand-strong: #0b4665;
  --cp-color-brand-soft: #e5f5fa;
  --cp-color-brand-accent: #168ab0;
  --cp-color-primary-text: #ffffff;
  --cp-color-success: #247a57;
  --cp-color-success-soft: #e7f7ef;
  --cp-color-warning: #936607;
  --cp-color-warning-soft: #fff5d8;
  --cp-color-danger: #9b2f2f;
  --cp-color-danger-soft: #fff0f0;
  --cp-shadow-soft: 0 16px 40px rgba(25, 40, 57, 0.08);
  --cp-shadow-panel: 0 14px 32px rgba(31, 43, 55, 0.07);
  --cp-overlay: rgba(4, 10, 16, 0.52);
}

@media (prefers-color-scheme: dark) {
  :root {
    --cp-color-page: #10161b;
    --cp-color-surface: #171f26;
    --cp-color-surface-soft: #111920;
    --cp-color-text: #edf4f8;
    --cp-color-muted: #9fb0bd;
    --cp-color-border: #2c3a45;
    --cp-color-border-strong: #43535f;
    --cp-color-hover: #202c35;
    --cp-color-brand: #62c2dd;
    --cp-color-brand-hover: #80d0e6;
    --cp-color-brand-strong: #b9ecf6;
    --cp-color-brand-soft: #11313d;
    --cp-color-brand-accent: #3fa7c4;
    --cp-color-primary-text: #071119;
    --cp-color-success: #7ce0b5;
    --cp-color-success-soft: #12382b;
    --cp-color-warning: #ffd37a;
    --cp-color-warning-soft: #3d2e10;
    --cp-color-danger: #ff9e9e;
    --cp-color-danger-soft: #3f1d1d;
    --cp-shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.28);
    --cp-shadow-panel: 0 14px 36px rgba(0, 0, 0, 0.24);
    --cp-overlay: rgba(2, 6, 10, 0.68);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --cp-color-page: #f3f7fa;
  --cp-color-surface: #ffffff;
  --cp-color-surface-soft: #f7fafc;
  --cp-color-text: #111a22;
  --cp-color-muted: #5f6d78;
  --cp-color-border: #d7e1e9;
  --cp-color-border-strong: #bfceda;
  --cp-color-hover: #edf5f9;
  --cp-color-brand: #0b6f95;
  --cp-color-brand-hover: #0a5f81;
  --cp-color-brand-strong: #0b4665;
  --cp-color-brand-soft: #e5f5fa;
  --cp-color-brand-accent: #168ab0;
  --cp-color-primary-text: #ffffff;
  --cp-color-success: #247a57;
  --cp-color-success-soft: #e7f7ef;
  --cp-color-warning: #936607;
  --cp-color-warning-soft: #fff5d8;
  --cp-color-danger: #9b2f2f;
  --cp-color-danger-soft: #fff0f0;
  --cp-shadow-soft: 0 16px 40px rgba(25, 40, 57, 0.08);
  --cp-shadow-panel: 0 14px 32px rgba(31, 43, 55, 0.07);
  --cp-overlay: rgba(4, 10, 16, 0.52);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --cp-color-page: #10161b;
  --cp-color-surface: #171f26;
  --cp-color-surface-soft: #111920;
  --cp-color-text: #edf4f8;
  --cp-color-muted: #9fb0bd;
  --cp-color-border: #2c3a45;
  --cp-color-border-strong: #43535f;
  --cp-color-hover: #202c35;
  --cp-color-brand: #62c2dd;
  --cp-color-brand-hover: #80d0e6;
  --cp-color-brand-strong: #b9ecf6;
  --cp-color-brand-soft: #11313d;
  --cp-color-brand-accent: #3fa7c4;
  --cp-color-primary-text: #071119;
  --cp-color-success: #7ce0b5;
  --cp-color-success-soft: #12382b;
  --cp-color-warning: #ffd37a;
  --cp-color-warning-soft: #3d2e10;
  --cp-color-danger: #ff9e9e;
  --cp-color-danger-soft: #3f1d1d;
  --cp-shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.28);
  --cp-shadow-panel: 0 14px 36px rgba(0, 0, 0, 0.24);
  --cp-overlay: rgba(2, 6, 10, 0.68);
}