:root {
  color-scheme: light;

  /* Primitive color tokens */
  --c-blue-600: #2563eb;
  --c-blue-700: #1d4ed8;
  --c-blue-050: #eff4ff;
  --c-blue-200: #c7d8fb;
  --c-red-600: #e04536;
  --c-red-050: #fdecea;
  --c-green-600: #16a34a;
  --c-green-050: #e9f7ee;
  --c-amber-700: #b45309;
  --c-amber-050: #fdf3e3;
  --c-gray-950: #121416;
  --c-gray-900: #1b1e21;
  --c-gray-850: #202428;
  --c-gray-800: #24282d;
  --c-gray-700: #343a40;
  --c-gray-650: #474f57;
  --c-gray-100: #f4f5f7;
  --c-gray-075: #f8fafc;
  --c-gray-050: #ffffff;
  --c-text-900: #1f2937;
  --c-text-700: #374151;
  --c-text-600: #4b5563;
  --c-text-500: #6b7280;
  --c-text-400: #9ca3af;
  --c-line-200: #e5e7eb;
  --c-line-100: #eef0f3;
  --c-night-text-900: #e8eaed;
  --c-night-text-600: #adb5bd;
  --c-night-text-400: #7f8993;
  --c-night-blue: #6ca8e8;
  --c-night-blue-hover: #8bbcf0;
  --c-night-blue-soft: #23364a;
  --c-night-red: #f06d73;
  --c-night-red-soft: #40262a;
  --c-night-green: #43bc8a;
  --c-night-green-soft: #1d382f;
  --c-night-amber: #e2ad58;
  --c-night-amber-soft: #3d3220;
  --c-transparent: transparent;
  --c-gold-700: #8b6b2f;
  --c-gold-500: #c9a55c;
  --c-gold-100: #f4ead4;
  --c-night-star: #d8e6f4;

  /* Primitive dimensions */
  --s-1: 1px;
  --s-2: 2px;
  --s-4: 4px;
  --s-6: 6px;
  --s-7: 7px;
  --s-8: 8px;
  --s-9: 9px;
  --s-10: 10px;
  --s-11: 11px;
  --s-12: 12px;
  --s-13: 13px;
  --s-14: 14px;
  --s-16: 16px;
  --s-18: 18px;
  --s-20: 20px;
  --s-22: 22px;
  --s-24: 24px;
  --s-26: 26px;
  --s-28: 28px;
  --s-30: 30px;
  --s-32: 32px;
  --s-34: 34px;
  --s-36: 36px;
  --s-40: 40px;
  --s-44: 44px;
  --s-46: 46px;
  --s-56: 56px;
  --s-64: 64px;
  --s-80: 80px;
  --s-96: 96px;
  --s-120: 120px;
  --s-160: 160px;
  --s-180: 180px;
  --s-240: 240px;
  --s-480: 480px;
  --s-200: 200px;
  --s-260: 260px;
  --s-320: 320px;
  --s-360: 360px;
  --s-400: 400px;
  --s-dialog: 512px;
  --s-dialog-wide: 768px;
  --s-content-max: 2200px;
  --s-field: 340px;

  /* Primitive typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-serif: "Kaiti SC", "STKaiti", "KaiTi", "STSong", "SimSun", serif;
  --font-10-5: 10.5px;
  --font-11: 11px;
  --font-11-5: 11.5px;
  --font-12: 12px;
  --font-12-5: 12.5px;
  --font-13: 13px;
  --font-14: 14px;
  --font-15: 15px;
  --font-17: 17px;
  --font-18: 18px;
  --font-24: 24px;
  --font-32: 32px;
  --weight-400: 400;
  --weight-500: 500;
  --weight-600: 600;
  --weight-700: 700;
  --weight-800: 800;

  /* Primitive effects */
  --radius-4: 4px;
  --radius-5: 5px;
  --radius-6: 6px;
  --radius-7: 7px;
  --radius-10: 10px;
  --radius-round: 999px;
  --shadow-card-light: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-card-dark: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.18);
  --duration-fast: 160ms;
  --duration-normal: 220ms;
  --duration-reduced: 1ms;
  --ease-standard: ease;
  --opacity-disabled: 0.52;
  --opacity-muted: 0.72;
  --scale-pulse: 0.84;
  --z-table: 2;
  --z-topbar: 50;
  --z-status: 55;
  --z-sidebar: 60;
  --z-mobile-nav: 70;
  --z-popover: 100;
  --z-dialog: 200;
  --z-toast: 240;

  /* Semantic tokens */
  --color-canvas: var(--c-gray-100);
  --color-surface: var(--c-gray-050);
  --color-surface-muted: var(--c-gray-075);
  --color-surface-raised: var(--c-gray-050);
  --color-text: var(--c-text-900);
  --color-text-secondary: var(--c-text-500);
  --color-text-faint: var(--c-text-400);
  --color-border: var(--c-line-200);
  --color-divider: var(--c-line-100);
  --color-primary: var(--c-blue-600);
  --color-primary-hover: var(--c-blue-700);
  --color-primary-soft: var(--c-blue-050);
  --color-primary-border: var(--c-blue-200);
  --color-up: var(--c-red-600);
  --color-up-soft: var(--c-red-050);
  --color-down: var(--c-green-600);
  --color-down-soft: var(--c-green-050);
  --color-warning: var(--c-amber-700);
  --color-warning-soft: var(--c-amber-050);
  --color-overlay: rgba(18, 20, 22, 0.46);
  --color-heaven: var(--c-gold-700);
  --color-heaven-bright: var(--c-gold-500);
  --color-heaven-soft: var(--c-gold-100);
  --color-heaven-star: var(--c-night-star);
  --shadow-card: var(--shadow-card-light);

  /* Component tokens */
  --shell-sidebar-width: var(--s-200);
  --shell-topbar-height: var(--s-46);
  --shell-summary-height: var(--s-36);
  --shell-status-height: var(--s-30);
  --shell-mobile-nav-height: var(--s-56);
  --page-padding-y: var(--s-14);
  --page-padding-x: var(--s-16);
  --layout-gap: var(--s-12);
  --control-height: var(--s-32);
  --touch-height: var(--s-44);
  --card-radius: var(--radius-10);
  --control-radius: var(--radius-7);
  --tag-radius: var(--radius-5);
  --focus-ring: 0 0 0 var(--s-2) var(--color-canvas), 0 0 0 var(--s-4) var(--color-primary);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: var(--c-gray-950);
  --color-surface: var(--c-gray-900);
  --color-surface-muted: var(--c-gray-850);
  --color-surface-raised: var(--c-gray-800);
  --color-text: var(--c-night-text-900);
  --color-text-secondary: var(--c-night-text-600);
  --color-text-faint: var(--c-night-text-400);
  --color-border: var(--c-gray-700);
  --color-divider: var(--c-gray-700);
  --color-primary: var(--c-night-blue);
  --color-primary-hover: var(--c-night-blue-hover);
  --color-primary-soft: var(--c-night-blue-soft);
  --color-primary-border: var(--c-gray-650);
  --color-up: var(--c-night-red);
  --color-up-soft: var(--c-night-red-soft);
  --color-down: var(--c-night-green);
  --color-down-soft: var(--c-night-green-soft);
  --color-warning: var(--c-night-amber);
  --color-warning-soft: var(--c-night-amber-soft);
  --color-overlay: rgba(0, 0, 0, 0.64);
  --color-heaven: var(--c-night-amber);
  --color-heaven-soft: var(--c-night-amber-soft);
  --shadow-card: var(--shadow-card-dark);
}