/**
 * QiMeng design tokens.
 *
 * New component styles must consume semantic tokens from this file.
 */

:root {
  /* Layout */
  --qm-site-max-width: 1200px;
  --qm-header-primary-height: 38px;
  --qm-header-secondary-height: 0px;
  --qm-header-height: var(--qm-header-primary-height);
  --qm-header-offset: var(--qm-header-height);
  --qm-header-layout-gap: 1.5rem;
  --qm-sidebar-width: 22%;
  --qm-main-width: 78%;

  /* Typography: 24 / 18 / 15 / 13, with 12px as the absolute minimum. */
  --qm-font-family-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --qm-font-family: var(--qm-font-family-system);
  --qm-font-size-page-title: 24px;
  --qm-font-size-module-title: 18px;
  --qm-font-size-body: 15px;
  --qm-font-size-meta: 13px;
  --qm-font-size-min: 12px;
  --qm-font-weight-regular: 400;
  --qm-font-weight-medium: 500;
  --qm-line-height-title: 1.4;
  --qm-line-height-body: 1.55;
  --qm-line-height-meta: 1.5;

  /* One brand color family. */
  --qm-primary: #d9261d;
  --qm-primary-light: #e46d66;
  --qm-primary-soft: #f5c7c4;
  --qm-primary-dark: #b81f18;
  --qm-primary-darker: #941a14;
  --qm-primary-rgb: 217, 38, 29;
  --qm-primary-light-rgb: 228, 109, 102;
  --qm-primary-soft-rgb: 245, 199, 196;
  --qm-primary-gradient: var(--qm-primary);
  --qm-primary-gradient-135: var(--qm-primary);
  --qm-primary-rgba-04: rgba(217, 38, 29, 0.04);
  --qm-primary-rgba-06: rgba(217, 38, 29, 0.06);
  --qm-primary-rgba-08: rgba(217, 38, 29, 0.08);
  --qm-primary-rgba-10: rgba(217, 38, 29, 0.1);
  --qm-primary-rgba-12: rgba(217, 38, 29, 0.12);
  --qm-primary-rgba-14: rgba(217, 38, 29, 0.14);
  --qm-primary-rgba-15: rgba(217, 38, 29, 0.15);
  --qm-primary-rgba-16: rgba(217, 38, 29, 0.16);
  --qm-primary-rgba-18: rgba(217, 38, 29, 0.18);
  --qm-primary-rgba-20: rgba(217, 38, 29, 0.2);
  --qm-primary-rgba-22: rgba(217, 38, 29, 0.22);
  --qm-primary-rgba-24: rgba(217, 38, 29, 0.24);
  --qm-primary-rgba-26: rgba(217, 38, 29, 0.26);
  --qm-primary-rgba-28: rgba(217, 38, 29, 0.28);
  --qm-primary-rgba-30: rgba(217, 38, 29, 0.3);
  --qm-primary-rgba-35: rgba(217, 38, 29, 0.35);
  --qm-primary-rgba-40: rgba(217, 38, 29, 0.4);
  --qm-primary-rgba-45: rgba(217, 38, 29, 0.45);
  --qm-primary-rgba-50: rgba(217, 38, 29, 0.5);
  --qm-primary-rgba-55: rgba(217, 38, 29, 0.55);
  --qm-primary-light-rgba-02: rgba(228, 109, 102, 0.02);
  --qm-primary-light-rgba-04: rgba(228, 109, 102, 0.04);
  --qm-primary-light-rgba-06: rgba(228, 109, 102, 0.06);
  --qm-primary-light-rgba-08: rgba(228, 109, 102, 0.08);
  --qm-primary-light-rgba-10: rgba(228, 109, 102, 0.1);
  --qm-primary-light-rgba-12: rgba(228, 109, 102, 0.12);
  --qm-primary-light-rgba-14: rgba(228, 109, 102, 0.14);
  --qm-primary-light-rgba-15: rgba(228, 109, 102, 0.15);
  --qm-primary-light-rgba-20: rgba(228, 109, 102, 0.2);
  --qm-primary-light-rgba-22: rgba(228, 109, 102, 0.22);
  --qm-primary-light-rgba-35: rgba(228, 109, 102, 0.35);
  --qm-primary-light-rgba-55: rgba(228, 109, 102, 0.55);

  /* Five-step neutral palette: white, light, medium, deep, text black. */
  --qm-gray-white: #ffffff;
  --qm-gray-light: #f5f6f8;
  --qm-gray-medium: #d0d5dd;
  --qm-gray-deep: #667085;
  --qm-gray-black: #1d2939;

  /* Semantic color tokens. */
  --qm-color-surface: var(--qm-gray-white);
  --qm-color-surface-muted: var(--qm-gray-light);
  --qm-color-border: var(--qm-gray-medium);
  --qm-color-text: var(--qm-gray-black);
  --qm-color-text-secondary: var(--qm-gray-deep);
  --qm-color-text-meta: var(--qm-gray-deep);
  --qm-color-link: var(--qm-primary);

  /* Compatibility aliases; do not use these in new component styles. */
  --qm-blue: var(--qm-primary);
  --qm-blue-light: var(--qm-primary-light);
  --qm-blue-rgba-15: var(--qm-primary-rgba-15);
  --qm-blue-rgba-12: var(--qm-primary-rgba-12);
  --qm-blue-light-rgba-90: var(--qm-primary-rgba-10);
  --qm-text-primary: var(--qm-color-text);
  --qm-text-secondary: var(--qm-color-text-secondary);
  --qm-text-muted: var(--qm-color-text-meta);
  --qm-text-light: var(--qm-color-text-meta);
  --qm-text-lighter: var(--qm-color-border);
  --qm-text-dark-primary: var(--qm-gray-white);
  --qm-text-dark-secondary: var(--qm-gray-medium);
  --qm-text-dark-muted: var(--qm-gray-medium);
  --qm-text-dark-light: var(--qm-gray-medium);
  --qm-text-dark-lighter: var(--qm-gray-medium);
  --qm-bg-white: var(--qm-color-surface);
  --qm-page-bg: var(--qm-color-surface-muted);
  --qm-bg-gray-50: var(--qm-color-surface-muted);
  --qm-bg-gray-100: var(--qm-color-surface-muted);
  --qm-bg-gray-200: var(--qm-color-border);
  --qm-bg-gray-800: var(--qm-gray-black);
  --qm-bg-gray-900: var(--qm-gray-black);
  --qm-bg-dark: var(--qm-gray-black);
  --qm-bg-dark-800: var(--qm-gray-black);
  --qm-bg-dark-700: var(--qm-gray-black);
  --qm-bg-dark-600: var(--qm-gray-deep);
  --qm-article-type-bg-normal: var(--qm-color-surface);
  --qm-article-type-bg-material: var(--qm-color-surface);
  --qm-article-type-bg-software: var(--qm-color-surface);
  --qm-bg-white-82: rgba(255, 255, 255, 0.82);
  --qm-bg-white-55: rgba(255, 255, 255, 0.55);
  --qm-bg-white-65: rgba(255, 255, 255, 0.65);
  --qm-bg-dark-90: rgba(29, 41, 57, 0.9);
  --qm-bg-dark-80: rgba(29, 41, 57, 0.8);
  --qm-bg-dark-45: rgba(29, 41, 57, 0.45);
  --qm-bg-dark-90-alt: rgba(102, 112, 133, 0.9);
  --qm-border-gray-200: var(--qm-color-border);
  --qm-border-gray-300: var(--qm-color-border);
  --qm-border-black-05: rgba(29, 41, 57, 0.05);
  --qm-border-black-06: rgba(29, 41, 57, 0.06);
  --qm-border-dark-600: rgba(255, 255, 255, 0.12);
  --qm-border-white-06: rgba(255, 255, 255, 0.06);
  --qm-border-dark-22: rgba(255, 255, 255, 0.22);

  /* Soft grey elevation. */
  --qm-shadow-sm: 0 1px 2px rgba(29, 41, 57, 0.04), 0 2px 6px rgba(29, 41, 57, 0.04);
  --qm-shadow-md: 0 4px 10px rgba(29, 41, 57, 0.06), 0 2px 4px rgba(29, 41, 57, 0.04);
  --qm-shadow-lg: 0 10px 24px rgba(29, 41, 57, 0.08), 0 3px 8px rgba(29, 41, 57, 0.04);
  --qm-shadow-xl: 0 18px 40px rgba(29, 41, 57, 0.1), 0 6px 14px rgba(29, 41, 57, 0.05);
  --qm-shadow-2xl: 0 24px 56px rgba(29, 41, 57, 0.12), 0 8px 20px rgba(29, 41, 57, 0.06);
  --qm-shadow-dark-md: 0 4px 12px rgba(0, 0, 0, 0.18);
  --qm-shadow-dark-lg: 0 12px 28px rgba(0, 0, 0, 0.24);
  --qm-shadow-dark-xl: 0 18px 40px rgba(0, 0, 0, 0.32);
  --qm-shadow-primary: var(--qm-shadow-md);

  /* Spacing. */
  --qm-spacing-1: 4px;
  --qm-spacing-2: 8px;
  --qm-spacing-3: 12px;
  --qm-spacing-4: 16px;
  --qm-spacing-5: 24px;
  --qm-spacing-6: 32px;
  --qm-spacing-7: 40px;
  --qm-spacing-8: 48px;
  --qm-spacing-xs: var(--qm-spacing-1);
  --qm-spacing-sm: var(--qm-spacing-2);
  --qm-spacing-md: var(--qm-spacing-4);
  --qm-spacing-lg: var(--qm-spacing-5);
  --qm-spacing-xl: var(--qm-spacing-6);

  /* Motion; transforms and opacity only for animated movement. */
  --qm-transition-fast: 0.2s ease;
  --qm-transition-base: 0.25s ease;
  --qm-transition-slow: 0.3s ease;

  /* Frosted glass is intentionally disabled by the design system. */
  --qm-glass-blur-radius-desktop: 0px;
  --qm-glass-blur-radius-mobile: 0px;
  --qm-glass-blur-radius: 0px;
  --qm-blur-md: none;
  --qm-blur-lg: none;
}

.dark,
body.dark,
body.dark-mode {
  /* Neutral graphite hierarchy: canvas < surface < raised < overlay. */
  --qm-gray-dark-page: #101114;
  --qm-gray-dark-muted: #14161a;
  --qm-gray-dark-surface: #181a1f;
  --qm-gray-dark-surface-raised: #202329;
  --qm-gray-dark-overlay: #272a31;
  --qm-gray-dark-border: rgba(255, 255, 255, 0.09);
  --qm-gray-dark-border-strong: rgba(255, 255, 255, 0.15);
  --qm-gray-dark-text-heading: #f7f8fa;
  --qm-gray-dark-text: #d9dee7;
  --qm-gray-dark-text-muted: #a4acb8;
  --qm-gray-dark-text-faint: #79818d;
  --qm-dark-control: rgba(255, 255, 255, 0.055);
  --qm-dark-control-hover: rgba(255, 255, 255, 0.09);
  --qm-dark-control-active: rgba(255, 255, 255, 0.13);
  --qm-dark-backdrop: rgba(0, 0, 0, 0.72);
  --qm-dark-focus-ring: 0 0 0 3px var(--qm-primary-rgba-24);

  --qm-color-surface: var(--qm-gray-dark-surface);
  --qm-color-surface-muted: var(--qm-gray-dark-page);
  --qm-color-border: var(--qm-gray-dark-border);
  --qm-color-text: var(--qm-gray-dark-text-heading);
  --qm-color-text-secondary: var(--qm-gray-dark-text);
  --qm-color-text-meta: var(--qm-gray-dark-text-muted);
  --qm-color-link: var(--qm-primary-light);
  --qm-text-primary: var(--qm-color-text);
  --qm-text-secondary: var(--qm-color-text-secondary);
  --qm-text-muted: var(--qm-color-text-meta);
  --qm-text-light: var(--qm-color-text-meta);
  --qm-text-lighter: var(--qm-gray-dark-text-faint);
  --qm-text-dark-primary: var(--qm-gray-dark-text-heading);
  --qm-text-dark-secondary: var(--qm-gray-dark-text);
  --qm-text-dark-muted: var(--qm-gray-dark-text-muted);
  --qm-text-dark-light: var(--qm-gray-dark-text-muted);
  --qm-text-dark-lighter: var(--qm-gray-dark-text-faint);
  --qm-bg-white: var(--qm-color-surface);
  --qm-page-bg: var(--qm-color-surface-muted);
  --qm-bg-gray-50: var(--qm-color-surface-muted);
  --qm-bg-gray-100: var(--qm-gray-dark-muted);
  --qm-bg-gray-200: var(--qm-color-border);
  --qm-bg-gray-800: var(--qm-gray-dark-surface);
  --qm-bg-gray-900: var(--qm-gray-dark-page);
  --qm-bg-dark: var(--qm-gray-dark-page);
  --qm-bg-dark-800: var(--qm-gray-dark-surface);
  --qm-bg-dark-700: var(--qm-gray-dark-muted);
  --qm-bg-dark-600: var(--qm-gray-dark-surface-raised);
  --qm-bg-dark-90: rgba(0, 0, 0, 0.88);
  --qm-bg-dark-80: rgba(0, 0, 0, 0.78);
  --qm-bg-dark-45: rgba(0, 0, 0, 0.45);
  --qm-border-gray-200: var(--qm-gray-dark-border);
  --qm-border-gray-300: var(--qm-gray-dark-border);
  --qm-border-black-05: var(--qm-gray-dark-border);
  --qm-border-black-06: var(--qm-gray-dark-border);
  --qm-border-dark-600: var(--qm-gray-dark-border);
  --qm-border-white-06: rgba(114, 114, 114, 0.08);
  --qm-border-dark-22: rgba(114, 114, 114, 0.22);
  --qm-shadow-md: var(--qm-shadow-dark-md);
  --qm-shadow-lg: var(--qm-shadow-dark-lg);
  --qm-shadow-xl: var(--qm-shadow-dark-xl, 0 18px 40px rgba(0, 0, 0, 0.32));
  --qm-article-type-bg-normal: var(--qm-color-surface);
  --qm-article-type-bg-material: var(--qm-color-surface);
  --qm-article-type-bg-software: var(--qm-color-surface);

  /* Bootstrap bridge: let core Bootstrap components follow the dark palette. */
  --bs-body-bg: var(--qm-gray-dark-surface);
  --bs-body-bg-rgb: 24, 26, 31;
  --bs-body-color: var(--qm-gray-dark-text);
  --bs-body-color-rgb: 217, 222, 231;
  --bs-emphasis-color: var(--qm-gray-dark-text-heading);
  --bs-emphasis-color-rgb: 248, 250, 252;
  --bs-secondary-color: var(--qm-gray-dark-text-muted);
  --bs-secondary-bg: var(--qm-gray-dark-muted);
  --bs-secondary-bg-rgb: 45, 46, 49;
  --bs-tertiary-color: var(--qm-gray-dark-text-muted);
  --bs-tertiary-bg: var(--qm-gray-dark-muted);
  --bs-border-color: var(--qm-gray-dark-border);
  --bs-border-color-translucent: var(--qm-gray-dark-border);
  --bs-link-color: var(--qm-primary-light);
  --bs-link-color-rgb: var(--qm-primary-light-rgb);
  --bs-link-hover-color: var(--qm-primary-soft);
  --bs-link-hover-color-rgb: var(--qm-primary-soft-rgb);

  /* ========== 毛玻璃系统（暗色） ==========
   * 浅色模式保持设计系统原状（--qm-glass-blur-radius: 0px，无毛玻璃）；
   * 暗色模式下恢复 blur 毛玻璃质感，并把所有半透明白色玻璃变量
   * 反转为基础深色玻璃（--qm-gray-dark-surface #323335 为底）。
   * 任何使用 var(--qm-bg-white-*) 的组件在暗色下自动获得深色玻璃。
   */
  --qm-glass-blur-radius-desktop: 18px;
  --qm-glass-blur-radius-mobile: 14px;
  --qm-glass-blur-radius: 18px;
  --qm-blur-md: blur(18px) saturate(165%);
  --qm-blur-lg: blur(26px) saturate(165%);

  /* 玻璃表面色板（暗色）：透明度递减 = 层级递进 */
  --qm-glass-bg: rgba(24, 26, 31, 0.72);          /* 常规玻璃表面（header/悬浮层） */
  --qm-glass-bg-strong: rgba(24, 26, 31, 0.88);   /* 强玻璃（滚动后 header/固定层） */
  --qm-glass-bg-soft: rgba(24, 26, 31, 0.58);     /* 弱玻璃（浅悬浮/提示层） */
  --qm-glass-border: rgba(255, 255, 255, 0.1);    /* 玻璃描边 */
  --qm-glass-highlight: rgba(255, 255, 255, 0.06);/* 玻璃高光层 */
  --qm-glass-shadow: 0 16px 44px rgba(0, 0, 0, 0.38); /* 玻璃投影 */

  /* 半透明白玻璃变量反转：组件直接引用这些变量时自动换为深色玻璃 */
  --qm-bg-white-82: var(--qm-glass-bg-strong);
  --qm-bg-white-65: var(--qm-glass-bg);
  --qm-bg-white-55: var(--qm-glass-bg-soft);
  --qm-bg-white: var(--qm-color-surface);
}

@media (max-width: 991.98px) {
  :root {
    --qm-header-primary-height: 48px;
    --qm-header-secondary-height: 0px;
  }
}