:root {
  --brand-primary: #0e4f4a;
  --brand-secondary: #2f6b57;
  --brand-accent: #d96b3b;
  --brand-ivory: #f6f3ea;
  --ui-background: #f5f7f5;
  --ui-surface: #ffffff;
  --text-primary: #183336;
  --text-secondary: #5e7274;
  --border-default: #d7e2de;
  --surface-muted: #e7efec;
  --status-danger: #b94f55;

  --font-sans-cn: "HarmonyOS Sans SC", "PingFang SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --font-sans-latin: "Inter", var(--font-sans-cn);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-control: 10px;
  --radius-card: 16px;
  --radius-feature: 24px;
  --shadow-card: 0 8px 24px rgb(14 79 74 / 8%);
}

.button-primary {
  color: #ffffff;
  background: var(--brand-primary);
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-control);
}

.button-secondary {
  color: var(--brand-primary);
  background: var(--ui-surface);
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-control);
}

.card {
  color: var(--text-primary);
  background: var(--ui-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}