:root {
  --color-bg: #f5f7fb;
  --color-surface: #ffffff;
  --color-surface-subtle: #f8fafc;
  --color-surface-hover: #f3f6fb;
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;

  --color-text: #111827;
  --color-text-secondary: #4b5563;
  --color-text-muted: #6b7280;
  --color-text-placeholder: #9ca3af;

  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-soft: #eff6ff;

  --color-success: #16a34a;
  --color-success-soft: #ecfdf5;
  --color-warning: #d97706;
  --color-warning-soft: #fffbeb;
  --color-danger: #dc2626;
  --color-danger-soft: #fef2f2;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.18);

  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-sans: "Inter", "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;

  --control-height: 32px;
  --control-height-sm: 28px;
  --table-header-height: 40px;
  --table-row-height: 44px;
  --status-height: 22px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  --header-height: 56px;
  --sidebar-width: 232px;
  --content-gap: var(--space-4);

  /* Legacy aliases kept so existing pages inherit the unified system. */
  --bg-page: var(--color-bg);
  --bg-card: var(--color-surface);
  --bg-soft: var(--color-surface-subtle);
  --bg-hover: var(--color-surface-hover);
  --border: var(--color-border);
  --border-strong: var(--color-border-strong);
  --text-main: var(--color-text);
  --text-sub: var(--color-text-muted);
  --text-muted: var(--color-text-placeholder);
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --primary-soft: var(--color-primary-soft);
  --danger: var(--color-danger);
  --danger-soft: var(--color-danger-soft);
  --success: var(--color-success);
  --success-soft: var(--color-success-soft);
  --warning: var(--color-warning);
  --warning-soft: var(--color-warning-soft);
  --radius: var(--radius-lg);
  --shadow-card: var(--shadow-sm);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100vh;
}

body {
  margin: 0;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  font-family: inherit;
}

code,
pre,
.json-preview,
.json-view,
.mono {
  font-family: var(--font-mono);
}

button {
  border: 0;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

::placeholder {
  color: var(--color-text-placeholder);
}

::selection {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.hidden {
  display: none !important;
}

.muted {
  color: var(--color-text-muted);
}

.strong {
  font-weight: 700;
}