:root {
  --ds-brand-primary: #176bff;
  --ds-brand-primary-muted: #5e91f5;
  --ds-brand-primary-mist: #dce9ff;

  --ds-surface-light-scaffold: #f7f3eb;
  --ds-surface-light-card: #fefbf4;
  --ds-surface-light-muted: #f0ece4;

  --ds-text-primary-light: #17191c;
  --ds-text-secondary-light: #4f5a68;
  --ds-border-light: #d8d2c7;

  --ds-surface-dark-scaffold: #11161d;
  --ds-surface-dark-card: #171d25;
  --ds-surface-dark-muted: #202834;

  --ds-text-primary-dark: #f3f4f6;
  --ds-text-secondary-dark: #c2cbd7;
  --ds-border-dark: #303844;

  --ds-grad-start: #78b3ff;
  --ds-grad-mid: #e8f2ff;
  --ds-grad-end: #e8d8be;

  --ds-radius-card: 18px;
  --ds-radius-control: 14px;
  --ds-radius-pill: 999px;

  --ds-shadow-soft: 0 10px 22px rgba(12, 22, 51, 0.1);
  --ds-shadow-card: 0 18px 52px rgba(12, 22, 51, 0.16);
}

html[data-theme="dark"] {
  --ds-shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.4);
  --ds-shadow-card: 0 22px 80px rgba(0, 0, 0, 0.55);
}