html:root {
  color-scheme: light;

  /* Brand */
  --sx-brand-900: #002b25;
  --sx-brand-800: #003730;
  --sx-brand-700: #07564b;
  --sx-brand-600: #1f6f60;
  --sx-brand-200: #b9d8ca;
  --sx-brand-100: #dcebe5;
  --sx-brand-50: #eef6f2;

  /* Neutrals */
  --sx-paper: #f5f0e8;
  --sx-canvas: #f1f3f0;
  --sx-surface: #fffdf9;
  --sx-surface-subtle: #f7f8f5;
  --sx-text-primary: #1c2925;
  --sx-text-secondary: #52615c;
  --sx-text-muted: #68766f;
  --sx-border: #d7ded9;
  --sx-border-strong: #aebbb4;

  /* Illustration */
  --sx-moss: #8fa88c;
  --sx-apricot: #e8a27e;
  --sx-fog-blue: #afc5c8;
  --sx-lantern: #f3cf77;

  /* Semantic */
  --sx-success: #27785a;
  --sx-warning: #9a5b12;
  --sx-danger: #b34848;
  --sx-info: #476f78;

  /* Typography */
  --sx-font-sans: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --sx-font-serif: "Noto Serif SC", "Songti SC", STSong, serif;
  --sx-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sx-text-12: 0.75rem;
  --sx-text-14: 0.875rem;
  --sx-text-16: 1rem;
  --sx-text-18: 1.125rem;
  --sx-text-22: 1.375rem;
  --sx-text-28: 1.75rem;
  --sx-text-36: 2.25rem;
  --sx-text-48: 3rem;

  /* Spacing */
  --sx-space-1: 4px;
  --sx-space-2: 8px;
  --sx-space-3: 12px;
  --sx-space-4: 16px;
  --sx-space-5: 20px;
  --sx-space-6: 24px;
  --sx-space-8: 32px;
  --sx-space-10: 40px;
  --sx-space-12: 48px;
  --sx-space-16: 64px;
  --sx-space-20: 80px;
  --sx-space-24: 96px;

  /* Shape */
  --sx-radius-control: 12px;
  --sx-radius-card: 16px;
  --sx-radius-dialog: 20px;
  --sx-radius-pill: 999px;

  /* Elevation */
  --sx-shadow-1: 0 1px 2px rgb(0 55 48 / 0.06);
  --sx-shadow-2: 0 8px 24px rgb(0 55 48 / 0.10);
  --sx-shadow-3: 0 20px 56px rgb(0 55 48 / 0.14);

  /* Motion */
  --sx-duration-fast: 160ms;
  --sx-duration-base: 240ms;
  --sx-duration-slow: 360ms;
  --sx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layers */
  --sx-z-base: 0;
  --sx-z-sticky: 100;
  --sx-z-nav: 200;
  --sx-z-overlay: 400;
  --sx-z-dialog: 500;
  --sx-z-toast: 600;

  /* Semantic aliases */
  --sx-bg-page: var(--sx-canvas);
  --sx-bg-surface: var(--sx-surface);
  --sx-bg-emphasis: var(--sx-brand-800);
  --sx-text-on-emphasis: #f8fbf9;
  --sx-focus-ring: var(--sx-brand-600);
  --sx-focus-shadow: rgb(31 111 96 / 0.24);
  --sx-border-soft: rgb(0 55 48 / 0.10);
  --sx-surface-glass: rgb(255 253 249 / 0.94);
  --sx-overlay: rgb(0 43 37 / 0.48);

  /* Element Plus bridge */
  --el-color-primary: var(--sx-brand-800);
  --el-color-primary-light-3: var(--sx-brand-700);
  --el-color-primary-light-5: var(--sx-brand-600);
  --el-color-primary-light-7: var(--sx-brand-200);
  --el-color-primary-light-8: var(--sx-brand-100);
  --el-color-primary-light-9: var(--sx-brand-50);
  --el-color-primary-dark-2: var(--sx-brand-900);
  --el-color-success: var(--sx-success);
  --el-color-warning: var(--sx-warning);
  --el-color-danger: var(--sx-danger);
  --el-color-error: var(--sx-danger);
  --el-color-info: var(--sx-info);
  --el-border-radius-base: var(--sx-radius-control);
  --el-border-radius-round: var(--sx-radius-pill);

}

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

  --sx-canvas: #101815;
  --sx-surface: #18221e;
  --sx-surface-subtle: #20302a;
  --sx-paper: #e9e2d7;
  --sx-text-primary: #f2f5f2;
  --sx-text-secondary: #c6d0cb;
  --sx-text-muted: #aebbb5;
  --sx-border: #34473f;
  --sx-border-strong: #51675e;

  --sx-brand-900: #d8eee3;
  --sx-brand-800: #b9ddca;
  --sx-brand-700: #9bcbb4;
  --sx-brand-600: #80bba2;
  --sx-brand-200: #315b4d;
  --sx-brand-100: #25483d;
  --sx-brand-50: #1d352d;

  --sx-success: #78c59e;
  --sx-warning: #e3ad61;
  --sx-danger: #ed8c8c;
  --sx-info: #8eb9c1;

  --sx-shadow-1: 0 1px 2px rgb(0 0 0 / 0.18);
  --sx-shadow-2: 0 8px 24px rgb(0 0 0 / 0.28);
  --sx-shadow-3: 0 20px 56px rgb(0 0 0 / 0.36);

  --sx-bg-emphasis: #9bcbb4;
  --sx-text-on-emphasis: #10251d;
  --sx-focus-ring: #9bcbb4;
  --sx-focus-shadow: rgb(155 203 180 / 0.28);
  --sx-border-soft: rgb(185 221 202 / 0.16);
  --sx-surface-glass: rgb(24 34 30 / 0.94);
  --sx-overlay: rgb(0 0 0 / 0.62);
}