:root {
  color-scheme: dark;

  --color-surface-canvas: #090b0f;
  --color-surface-canvas-luminance: 0.04;
  --color-surface-canvas-glow: #101620; /* html radial-gradient 顶色, 收编自 index.css 硬编码 */
  --color-surface-elevated: #13171d;
  --color-surface-elevated-luminance: 0.08;
  --color-surface-raised: #1c2128;
  --color-surface-raised-luminance: 0.11;
  --color-surface-overlay: #252a32;
  --color-surface-overlay-luminance: 0.15;

  --color-text-primary: #f2f4f8;
  --color-text-primary-luminance: 0.95;
  --color-text-secondary: #a8b0bc;
  --color-text-secondary-luminance: 0.66;
  --color-text-tertiary: #7a828d;
  /* WCAG relative luminance for the effective tertiary text color. */
  --color-text-tertiary-luminance: 0.2203;

  --color-inverted-surface: #f2f4f8;
  --color-inverted-surface-luminance: 0.95;
  --color-inverted-text: #14181f;
  --color-inverted-text-luminance: 0.10;

  --color-status-healthy: #30d158;
  --color-status-healthy-luminance: 0.58;
  --color-status-warning: #ffd60a;
  --color-status-warning-luminance: 0.80;
  --color-status-critical: #ff453a;
  --color-status-critical-luminance: 0.48;
  --color-status-down: #6e7681;
  --color-status-down-luminance: 0.20;
  --color-status-info: #5e9eff;
  --color-status-info-luminance: 0.59;

  --color-brand-accent: #ff8a3d;
  --color-brand-accent-luminance: 0.68;

  --hero-gradient-from: #181b21;
  --hero-gradient-to: #0f1115;
  --hero-inset-highlight: rgba(255,255,255,0.04);
  --hero-shadow-color: rgba(0,0,0,0.6);
  --shadow-hero: inset 0 1px 0 var(--hero-inset-highlight), 0 20px 40px -20px var(--hero-shadow-color);

  --color-border-subtle: rgba(255,255,255,0.06);
  --color-border-strong: rgba(255,255,255,0.20);

  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);

  --font-family-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Helvetica Neue", system-ui, sans-serif;
  --font-family-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, "JetBrains Mono Variable", "Roboto Mono", monospace;

  --font-size-display: 48px;
  --font-line-display: 56px;
  --font-weight-display: 600;
  --font-letter-display: -0.02em;

  --font-size-title-1: 32px;
  --font-line-title-1: 40px;
  --font-weight-title-1: 600;
  --font-letter-title-1: -0.015em;

  --font-size-title-2: 20px;
  --font-line-title-2: 28px;
  --font-weight-title-2: 600;
  --font-letter-title-2: -0.01em;

  --font-size-body: 14px;
  --font-line-body: 20px;
  --font-weight-body: 400;
  --font-letter-body: 0;

  --font-size-caption: 12px;
  --font-line-caption: 16px;
  --font-weight-caption: 500;
  --font-letter-caption: 0.01em;

  --font-size-mono-num: clamp(16px, 1.6vw, 20px);
  --font-line-mono-num: 28px;
  --font-weight-mono-num: 500;
  --font-letter-mono-num: 0;

  --font-size-brand: 11px;
  --font-line-brand: 16px;
  --font-weight-brand: 600;
  --font-letter-brand: 0.08em;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  --radius-docked: 0;
  --radius-chip: 6px;
  --radius-input: 10px;
  --radius-card: 24px;
  --radius-modal: 18px;
  --radius-hero: 20px;
  --radius-sheet: 22px;
  --radius-drawer: 28px;
  --radius-pill: 9999px;
  --radius-control: 12px;

  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.5, 1.5, 0.5, 1);
  --duration-micro: 100ms;
  --duration-press: 120ms;
  --duration-state: 180ms;
  --duration-short: 200ms;
  --duration-panel: 220ms;
  --duration-medium: 350ms;
  --duration-long: 500ms;

  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;


  /* Short-name aliases for tailwind utility classes.
     通道制: RGB 三元组值专供 tailwind `rgb(var(--x) / <alpha-value>)` 组装, 让 `色名/透明度` 工具类真正生成。
     铁律零例外: 无 --color- 前缀的短名=通道值(非法 CSS 色, 禁直接 var() 当色用);
     CSS/JSX 直接 var() 消费一律用 --color-* 长名(surface/text/status/brand 系, 全是合法 hex)。 */
  --canvas: 9 11 15; /* #090b0f */
  --elevated: 19 23 29; /* #13171d */
  --raised: 28 33 40; /* #1c2128 */
  --overlay: 37 42 50; /* #252a32 */
  --text: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-tertiary: 122 130 141; /* #7a828d */
  --text-inverted: var(--color-inverted-text);
  --healthy: 48 209 88; /* #30d158 */
  --warning: 255 214 10; /* #ffd60a */
  --critical: 255 69 58; /* #ff453a */
  --down: 110 118 129; /* #6e7681 */
  --info: 94 158 255; /* #5e9eff */
  --accent: 255 138 61; /* #ff8a3d = brand-accent */
  --danger: 255 69 58; /* = status-critical */
  --success: 48 209 88; /* = status-healthy */
  --border-subtle: var(--color-border-subtle);
  --border-strong: var(--color-border-strong);
}