:root {
  color-scheme: light;
  --cp-bg: #f7f7fb;
  --cp-bg-elevated: #f0effa;
  --cp-surface: #ffffff;
  --cp-surface-soft: #f3f1fc;
  --cp-border: #e3e1f0;
  --cp-border-strong: #8a879f;
  --cp-text: #11111a;
  --cp-text-muted: #55536b;
  --cp-text-soft: #6b6982;
  --cp-accent: #5a36f0;
  --cp-accent-hover: #4a28d8;
  --cp-accent-soft: rgba(109, 74, 255, 0.1);
  --cp-accent-fg: #ffffff;
  --cp-success: #128c5b;
  --cp-danger: #b32639;
  --cp-warning: #a56700;
  --cp-link: #5a36f0;
  --cp-shadow: 0 12px 32px rgba(17, 17, 26, 0.08);
  --cp-overlay: rgba(255, 255, 255, 0.8);
  --cp-panel: rgba(255, 255, 255, 0.86);
  --cp-panel-strong: rgba(255, 255, 255, 0.96);
  --cp-sheen: rgba(255, 255, 255, 0.55);
  --cp-highlight: rgba(109, 74, 255, 0.12);
  --cp-brand: #f1edff;
  --cp-brand-band: linear-gradient(120deg, #f1edff 0%, #fdeef6 55%, #fff1e6 100%);
  --cp-brand-deep: #11111a;
  --cp-brand-hover: #23233a;
  --cp-brand-ink: #11111a;
  --cp-brand-fg: #ffffff;
  --cp-brand-muted: #a9a7c4;
  --cp-brand-border: rgba(255, 255, 255, 0.1);
  --cp-action: #6d4aff;
  --cp-action-hover: #5a36f0;
  --cp-action-fg: #ffffff;
  --cp-action-soft: #ede8ff;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --cp-bg: #0e0e16;
  --cp-bg-elevated: #14141f;
  --cp-surface: #1a1a28;
  --cp-surface-soft: #232334;
  --cp-border: #34344a;
  --cp-border-strong: #7a7898;
  --cp-text: #f4f3fa;
  --cp-text-muted: #b8b6cc;
  --cp-text-soft: #a3a1bb;
  --cp-accent: #a996ff;
  --cp-accent-hover: #c3b6ff;
  --cp-accent-soft: rgba(169, 150, 255, 0.14);
  --cp-accent-fg: #11111a;
  --cp-success: #4ade80;
  --cp-danger: #f87171;
  --cp-warning: #fbbf24;
  --cp-link: #a996ff;
  --cp-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
  --cp-overlay: rgba(14, 14, 22, 0.88);
  --cp-panel: rgba(26, 26, 40, 0.72);
  --cp-panel-strong: rgba(26, 26, 40, 0.96);
  --cp-sheen: rgba(255, 255, 255, 0.04);
  --cp-highlight: rgba(169, 150, 255, 0.14);
  --cp-brand: #231c45;
  --cp-brand-band: linear-gradient(120deg, #231c45 0%, #2c1b33 55%, #33241b 100%);
  --cp-brand-deep: #08080e;
  --cp-brand-hover: #1f1f30;
  --cp-brand-ink: #f4f3fa;
  --cp-brand-border: rgba(255, 255, 255, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--cp-bg);
  color: var(--cp-text);
  font-family: "Segoe UI", Aptos, Calibri, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.5;
  letter-spacing: 0;
}