/* ==========================================================================
   米旺科技官网 · 设计令牌
   风格：现代 Editorial / Magazine —— 克制、低饱和、重阅读感
   主色调：白 / 米白 / 浅灰 / 深灰
   ========================================================================== */

:root {
  /* ---------- 字体 ---------- */
  /* 一级标题用衬线字体；正文用简洁无衬线字体 */
  --font-serif: 'Noto Serif SC', 'Source Han Serif SC', 'Source Han Serif CN', 'Songti SC', STSong,
    'SimSun', Georgia, 'Times New Roman', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;

  /* ---------- 字号 ---------- */
  --text-2xs: 0.6875rem; /* 11 */
  --text-xs: 0.75rem; /* 12 */
  --text-sm: 0.8125rem; /* 13 */
  --text-base: 0.9375rem; /* 15 */
  --text-md: 1rem; /* 16 */
  --text-lg: 1.0625rem; /* 17 */
  --text-xl: 1.25rem; /* 20 */
  --text-2xl: 1.5rem; /* 24 */
  --text-3xl: 2rem; /* 32 */
  --text-4xl: 2.5rem; /* 40 */
  --text-5xl: 3.25rem; /* 52 */
  --text-6xl: 4rem; /* 64 */

  /* ---------- 行高 ---------- */
  --leading-tight: 1.24;
  --leading-snug: 1.45;
  --leading-normal: 1.7;
  --leading-loose: 1.95;

  /* ---------- 间距（4px 基准） ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---------- 版心（控制最大宽度，避免铺满屏幕） ---------- */
  --container: 1100px;
  --container-wide: 1280px;
  --container-narrow: 700px;
  --gutter: var(--space-6);

  /* ---------- 圆角（轻微圆角，避免过大与胶囊式） ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* ---------- 动效（统一 150–250ms） ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 250ms;

  /* ---------- 层级 ---------- */
  --z-header: 100;
  --z-nav: 120;
}

/* ==========================================================================
   浅色模式（默认）
   ========================================================================== */
:root,
html[data-theme='light'] {
  color-scheme: light;

  --bg: #ffffff;
  --bg-soft: #faf9f6; /* 米白 */
  --bg-mute: #f4f3f0; /* 浅灰 */
  --bg-sunken: #efeeea;

  --text: #1b1b19; /* 深灰 */
  --text-soft: #56564e;
  --text-mute: #6f6f66;

  /* 极少量发丝线——视觉层级优先靠留白、字号与背景色 */
  --hairline: #e8e6e0;
  --hairline-soft: rgba(27, 27, 25, 0.07);

  /* 按钮：黑色 / 深炭灰 + 白色文字，避免高饱和度颜色 */
  --btn-bg: #1f1f1d;
  --btn-bg-hover: #35352f;
  --btn-fg: #ffffff;

  --btn-ghost-fg: #1b1b19;
  --btn-ghost-hover: rgba(27, 27, 25, 0.05);

  /* 磨玻璃导航栏 */
  --glass-bg: rgba(255, 255, 255, 0.66);
  --glass-bg-solid: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(27, 27, 25, 0.08);

  /* 阴影保持轻微，仅用于区分层级 */
  --shadow-xs: 0 1px 2px rgba(24, 24, 22, 0.04);
  --shadow-sm: 0 1px 2px rgba(24, 24, 22, 0.04), 0 2px 6px rgba(24, 24, 22, 0.035);
  --shadow-md: 0 2px 4px rgba(24, 24, 22, 0.045), 0 8px 18px rgba(24, 24, 22, 0.05);

  --img-placeholder: #efeeea;
}

/* ==========================================================================
   深色模式 —— 接近黑色的深灰背景，而非纯黑
   ========================================================================== */
html[data-theme='dark'] {
  color-scheme: dark;

  --bg: #141413;
  --bg-soft: #191918;
  --bg-mute: #1f1f1e;
  --bg-sunken: #101010;

  --text: #ecebe6;
  --text-soft: #b1b0a8;
  --text-mute: #8f8e85;

  --hairline: #2c2c29;
  --hairline-soft: rgba(236, 235, 230, 0.09);

  /* 深色背景上深炭灰按钮无法辨识，沿用同一套中性原则做反相 */
  --btn-bg: #e9e8e3;
  --btn-bg-hover: #ffffff;
  --btn-fg: #16161a;

  --btn-ghost-fg: #ecebe6;
  --btn-ghost-hover: rgba(236, 235, 230, 0.08);

  --glass-bg: rgba(20, 20, 19, 0.64);
  --glass-bg-solid: rgba(20, 20, 19, 0.85);
  --glass-border: rgba(236, 235, 230, 0.1);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24), 0 2px 6px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.26), 0 8px 18px rgba(0, 0, 0, 0.24);

  --img-placeholder: #1f1f1e;
}