:root {
  color-scheme: light;

  /* Typography */
  --ui-font-sans: Inter, "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  --ui-font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --ui-text-xs: 0.75rem;
  --ui-text-sm: 0.875rem;
  --ui-text-md: 1rem;
  --ui-text-lg: 1.25rem;
  --ui-text-xl: 1.5rem;
  --ui-text-2xl: 2rem;
  --ui-leading-tight: 1.25;
  --ui-leading-body: 1.5;

  /* Space */
  --ui-space-1: 0.25rem;
  --ui-space-2: 0.5rem;
  --ui-space-3: 0.75rem;
  --ui-space-4: 1rem;
  --ui-space-6: 1.5rem;
  --ui-space-8: 2rem;
  --ui-space-12: 3rem;

  /* Geometry */
  --ui-radius-compact: 0.375rem;
  --ui-radius-control: 0.625rem;
  --ui-radius-card: 0.875rem;
  --ui-radius-pill: 999px;
  --ui-control-compact: 2.25rem;
  --ui-control-normal: 2.75rem;
  --ui-control-prominent: 3rem;
  --ui-control-current: var(--ui-control-normal);

  /* Neutral operational palette */
  --ui-bg: #f5f6f8;
  --ui-surface: #ffffff;
  --ui-surface-subtle: #f8fafc;
  --ui-text: #1f2430;
  --ui-text-muted: #5b6472;
  --ui-border: #e2e5ea;
  --ui-brand: #2f6f6a;
  --ui-brand-hover: #285f5b;
  --ui-on-brand: #ffffff;

  /* Semantic states */
  --ui-info: #2f6fd6;
  --ui-info-bg: #edf4ff;
  --ui-success: #2f8a4e;
  --ui-success-bg: #eaf6ee;
  --ui-warning: #a6641c;
  --ui-warning-bg: #fbf6e8;
  --ui-danger: #b3261e;
  --ui-danger-bg: #fdecec;

  /* Interaction */
  --ui-shadow-sm: 0 1px 2px rgb(16 24 40 / 6%);
  --ui-shadow-md: 0 4px 12px rgb(16 24 40 / 8%);
  --ui-overlay: rgb(15 23 42 / 48%);
  --ui-focus: #2f6fd6;
  --ui-motion-fast: 120ms;
  --ui-motion-normal: 180ms;
  --ui-motion-slow: 240ms;
  --ui-page-max: 80rem;
  --ui-content-max: 70rem;
  --ui-sidenav-width: 13rem;
  --ui-nav-current-bg: color-mix(in srgb, var(--ui-brand) 12%, transparent);
  --ui-layer-appbar: 100;
  --ui-layer-sticky: 200;
  --ui-layer-dialog: 1000;
  --ui-layer-toast: 1100;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ui-bg: #111827;
  --ui-surface: #182230;
  --ui-surface-subtle: #202d3d;
  --ui-text: #edf3fb;
  --ui-text-muted: #a9b7c9;
  --ui-border: #35465d;
  --ui-brand: #70b8ae;
  --ui-brand-hover: #8bcac2;
  --ui-on-brand: #10211f;
  --ui-info: #78a9ff;
  --ui-info-bg: #1b3152;
  --ui-success: #70d69b;
  --ui-success-bg: #183729;
  --ui-warning: #efb75c;
  --ui-warning-bg: #3d2f18;
  --ui-danger: #ff8f8f;
  --ui-danger-bg: #482326;
  --ui-shadow-sm: 0 1px 2px rgb(0 0 0 / 24%);
  --ui-shadow-md: 0 5px 16px rgb(0 0 0 / 28%);
  --ui-overlay: rgb(0 0 0 / 66%);
  --ui-focus: #78a9ff;
}

:root[data-ui-density="compact"] {
  --ui-control-current: var(--ui-control-compact);
}

:root[data-ui-density="prominent"] {
  --ui-control-current: var(--ui-control-prominent);
}