/* QIENET Design System foundation tokens.
 * Keep semantic tokens stable; page/module CSS should consume these values.
 */
:root {
  --qn-color-brand: #1677ff;
  --qn-color-brand-hover: #0f5dcc;
  --qn-color-brand-active: #0b4aa3;
  --qn-color-brand-soft: #eaf4ff;
  --qn-color-canvas: #f7f9fc;
  --qn-color-surface: #ffffff;
  --qn-color-surface-soft: #f8fbff;
  --qn-color-text: #1f2937;
  --qn-color-text-strong: #14223c;
  --qn-color-text-muted: #667085;
  --qn-color-text-disabled: #98a2b3;
  --qn-color-border: #e4e7ec;
  --qn-color-border-strong: #d0d5dd;
  --qn-color-success: #14804f;
  --qn-color-success-soft: #eaf8f0;
  --qn-color-warning: #a15c00;
  --qn-color-warning-soft: #fff5e6;
  --qn-color-danger: #c43232;
  --qn-color-danger-soft: #fff0f0;
  --qn-color-info: #1677ff;
  --qn-color-info-soft: #eaf4ff;

  --qn-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --qn-font-size-body: 15px;
  --qn-line-height-body: 1.6;
  --qn-radius-sm: 8px;
  --qn-radius-md: 12px;
  --qn-radius-lg: 16px;
  --qn-radius-xl: 20px;
  --qn-radius-pill: 999px;
  --qn-shadow-sm: 0 2px 8px rgba(20, 34, 60, .04);
  --qn-shadow-md: 0 8px 28px rgba(40, 83, 124, .08);
  --qn-shadow-lg: 0 16px 45px rgba(35, 80, 125, .12);
  --qn-focus-ring: 0 0 0 3px rgba(22, 119, 255, .16);
  --qn-motion-fast: 160ms;
  --qn-motion-normal: 220ms;
  --qn-container-content: 1280px;
  --qn-container-wide: 1440px;
  --qn-container-workspace: 1480px;
  --qn-container-reading: 860px;
  --qn-container-form: 720px;
  --qn-container-auth: 960px;
  --qn-container-modal: 640px;

  /* Compatibility aliases for the existing shared UI file. */
  --qn-ui-primary: var(--qn-color-brand);
  --qn-ui-primary-2: #1d8cff;
  --qn-ui-primary-soft: var(--qn-color-brand-soft);
  --qn-ui-ink: var(--qn-color-text-strong);
  --qn-ui-text: var(--qn-color-text);
  --qn-ui-muted: var(--qn-color-text-muted);
  --qn-ui-line: var(--qn-color-border);
  --qn-ui-line-strong: var(--qn-color-border-strong);
  --qn-ui-canvas: var(--qn-color-canvas);
  --qn-ui-surface: var(--qn-color-surface);
  --qn-ui-surface-soft: var(--qn-color-surface-soft);
  --qn-ui-radius-sm: var(--qn-radius-sm);
  --qn-ui-radius: var(--qn-radius-md);
  --qn-ui-radius-lg: var(--qn-radius-lg);
  --qn-ui-shadow: var(--qn-shadow-md);
}

html[data-theme="dark"] {
  --qn-color-canvas: #0f141b;
  --qn-color-surface: #171e27;
  --qn-color-surface-soft: #1c2530;
  --qn-color-text: #d7e0ea;
  --qn-color-text-strong: #eef4fb;
  --qn-color-text-muted: #9facba;
  --qn-color-text-disabled: #788696;
  --qn-color-border: #303b48;
  --qn-color-border-strong: #3d4957;
  --qn-color-brand: #72aefc;
  --qn-color-brand-hover: #8abaff;
  --qn-color-brand-active: #a8ccff;
  --qn-color-brand-soft: #172c43;
  --qn-color-success: #64c89e;
  --qn-color-success-soft: #153128;
  --qn-color-warning: #e7b765;
  --qn-color-warning-soft: #372a15;
  --qn-color-danger: #ff9393;
  --qn-color-danger-soft: #3a2023;
  --qn-color-info-soft: #172c43;
  --qn-shadow-sm: 0 2px 8px rgba(0, 0, 0, .16);
  --qn-shadow-md: 0 8px 28px rgba(0, 0, 0, .22);
  --qn-shadow-lg: 0 16px 45px rgba(0, 0, 0, .28);
  --qn-focus-ring: 0 0 0 3px rgba(114, 174, 252, .22);
}