:root {
  --color-bg: #f5f7fb;
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-text: #172033;
  --color-text-muted: #637083;
  --color-border: #d9e0ea;
  --color-primary: #2854d8;
  --color-primary-hover: #1f43ad;
  --color-danger: #c6283f;
  --color-warning: #b66a00;
  --color-success: #167a4a;
  --color-info: #176ea8;
  --shadow-card: 0 18px 48px rgb(29 41 57 / 10%);
  --shadow-soft: 0 8px 22px rgb(29 41 57 / 8%);
  --radius-sm: .55rem;
  --radius-md: .9rem;
  --radius-lg: 1.35rem;
  --focus-ring: 0 0 0 .24rem rgb(40 84 216 / 26%);
  --topbar-h: 72px;
  --space-page: clamp(1rem, 2vw, 2rem);
  color-scheme: light;
}

html[data-theme="dark"] {
  --color-bg: #0d1220;
  --color-surface: #141b2d;
  --color-surface-elevated: #1b2437;
  --color-text: #eef4ff;
  --color-text-muted: #aebbd0;
  --color-border: #2b3850;
  --color-primary: #7aa2ff;
  --color-primary-hover: #a9c2ff;
  --color-danger: #ff7a90;
  --color-warning: #ffc266;
  --color-success: #5cdb9b;
  --color-info: #78c7ff;
  --shadow-card: 0 18px 48px rgb(0 0 0 / 32%);
  --shadow-soft: 0 8px 22px rgb(0 0 0 / 28%);
  --focus-ring: 0 0 0 .24rem rgb(122 162 255 / 32%);
  color-scheme: dark;
}

html[data-theme="system"] {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --color-bg: #0d1220;
    --color-surface: #141b2d;
    --color-surface-elevated: #1b2437;
    --color-text: #eef4ff;
    --color-text-muted: #aebbd0;
    --color-border: #2b3850;
    --color-primary: #7aa2ff;
    --color-primary-hover: #a9c2ff;
    --color-danger: #ff7a90;
    --color-warning: #ffc266;
    --color-success: #5cdb9b;
    --color-info: #78c7ff;
    --shadow-card: 0 18px 48px rgb(0 0 0 / 32%);
    --shadow-soft: 0 8px 22px rgb(0 0 0 / 28%);
    --focus-ring: 0 0 0 .24rem rgb(122 162 255 / 32%);
  }
}