:root {
  color-scheme: light;

  /* Brand / primary */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #172554;

  /* Supporting accent */
  --color-cyan-50: #ecfeff;
  --color-cyan-100: #cffafe;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;

  /* Neutral surfaces */
  --color-bg-page: #f4f8ff;
  --color-bg-page-deep: #edf4ff;
  --color-bg-surface: #ffffff;
  --color-bg-subtle: #f8fbff;
  --color-bg-selected: #eaf3ff;
  --color-bg-overlay: rgba(11, 29, 61, 0.56);

  /* Typography */
  --color-text-primary: #10234f;
  --color-text-secondary: #536784;
  --color-text-tertiary: #8797af;
  --color-text-disabled: #a9b6c8;
  --color-text-inverse: #ffffff;
  --color-link: #2563eb;
  --color-link-hover: #1d4ed8;

  /* Borders */
  --color-border-subtle: #e8eff8;
  --color-border: #dce7f5;
  --color-border-strong: #c6d7ed;
  --color-focus-ring: rgba(37, 99, 235, 0.22);

  /* Form controls */
  --control-border: #d7e3f2;
  --control-border-hover: #b8cbe2;
  --control-border-focus: #6ea1f7;
  --control-focus-ring: rgba(37, 99, 235, 0.12);

  /* Semantic */
  --color-success-50: #ecfdf5;
  --color-success-500: #22c55e;
  --color-success-600: #16a34a;
  --color-warning-50: #fff7ed;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-danger-50: #fef2f2;
  --color-danger-500: #ef4444;
  --color-danger-600: #dc2626;
  --color-info-50: #eff6ff;
  --color-info-600: #2563eb;

  /* Font families */
  --font-family-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Font sizes */
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-4xl: 36px;

  /* Line heights */
  --line-height-xs: 18px;
  --line-height-sm: 20px;
  --line-height-md: 22px;
  --line-height-lg: 26px;
  --line-height-xl: 30px;
  --line-height-2xl: 32px;
  --line-height-3xl: 40px;
  --line-height-4xl: 44px;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

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

  /* Radius */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 3px rgba(34, 73, 131, 0.06);
  --shadow-sm: 0 4px 14px rgba(34, 73, 131, 0.07);
  --shadow-md: 0 10px 30px rgba(34, 73, 131, 0.10);
  --shadow-lg: 0 22px 60px rgba(34, 73, 131, 0.16);
  --shadow-focus: 0 0 0 4px var(--color-focus-ring);

  /* Motion */
  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --duration-slow: 280ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Application dimensions */
  --app-header-height: 64px;
  --app-sidebar-width: 240px;
  --content-max-width: 1600px;

}