:root {
  color-scheme: light;
  --color-bg: #fdf8fa;
  --color-surface: #ffffff;
  --color-surface-soft: #faf6f8;
  --color-surface-muted: #f5edf2;
  --color-text: #1a1020;
  --color-text-soft: #3a2535;
  --color-muted: #7a5f72;
  --color-faint: #b090a0;
  --color-line: #f0e6ec;
  --color-line-strong: #e4d8e1;
  --color-brand: #c9006b;
  --color-brand-bright: #ff5f7e;
  --color-brand-soft: #fff0f6;
  --color-footer: #1a0a12;
  --gradient-brand: linear-gradient(135deg, var(--color-brand), var(--color-brand-bright));
  --shadow-soft: 0 14px 35px rgb(80 20 55 / 9%);
  --header-height: 64px;
  --sidebar-width: 220px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}

body.theme-dark {
  color-scheme: dark;
  --color-bg: #120d12;
  --color-surface: #1c151c;
  --color-surface-soft: #251b23;
  --color-surface-muted: #30232d;
  --color-text: #fff7fb;
  --color-text-soft: #e9dce4;
  --color-muted: #bea8b6;
  --color-faint: #927b89;
  --color-line: #372833;
  --color-line-strong: #493441;
  --color-brand-soft: #3a1429;
  --color-footer: #080507;
  --shadow-soft: 0 16px 40px rgb(0 0 0 / 24%);
}

@media (max-width: 1179px) {
  :root {
    --header-height: 60px;
    --sidebar-width: 64px;
  }
}

@media (max-width: 767px) {
  :root {
    --header-height: 56px;
    --sidebar-width: 0px;
  }
}