/**
 * 茶啊冲文选集 — 设计令牌
 * 茶香绿意：墨绿/茶绿 + 暖金点缀
 * 偏安静阅读：柔和对比、轻阴影、舒适间距
 */

:root {
  /* 色彩 · 浅色（略降对比，减轻长时间阅读疲劳） */
  --color-bg: #f5f4ef;
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-text: #1c221e;
  --color-text-muted: #5a645d;
  --color-text-faint: #8b948d;
  --color-border: #e4e8e3;
  --color-border-strong: #c9d1ca;
  --color-primary: #2f6b4f;
  --color-primary-hover: #245540;
  --color-primary-soft: rgba(47, 107, 79, 0.09);
  --color-accent: #c4a35a;
  --color-accent-soft: rgba(196, 163, 90, 0.14);
  --color-danger: #b54a3c;
  --color-hero-from: #e9f1eb;
  --color-hero-to: #f5f4ef;
  --color-overlay: rgba(18, 22, 20, 0.42);
  --color-focus: #2f6b4f;
  --color-demo: #8b6914;
  --color-demo-bg: rgba(196, 163, 90, 0.16);

  /* 阴影：更轻、更弥散 */
  --shadow-sm: 0 1px 2px rgba(28, 34, 30, 0.04), 0 1px 1px rgba(28, 34, 30, 0.02);
  --shadow-md: 0 6px 20px rgba(28, 34, 30, 0.06), 0 2px 6px rgba(28, 34, 30, 0.03);
  --shadow-lg: 0 14px 36px rgba(28, 34, 30, 0.08), 0 4px 12px rgba(28, 34, 30, 0.04);
  --shadow-focus: 0 0 0 3px rgba(47, 107, 79, 0.26);

  /* 圆角 */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-full: 999px;

  /* 字体 */
  --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans SC", system-ui, -apple-system, sans-serif;
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC",
    "STSong", "SimSun", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Consolas", monospace;

  /* 字号阶梯 */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  /* 行高 */
  --leading-tight: 1.25;
  --leading-snug: 1.4;
  --leading-normal: 1.65;
  --leading-relaxed: 1.85;

  /* 间距 */
  --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;

  /* 布局 */
  --content-width: 42rem;
  --page-width: 68rem;
  --nav-height: 4rem;
  --header-blur: 14px;
  --tap-min: 2.75rem;

  /* 动效 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast: 150ms;
  --duration: 220ms;
  --duration-slow: 360ms;

  /* z-index */
  --z-nav: 100;
  --z-overlay: 200;
  --z-toast: 300;
  --z-top: 400;
}

/* 深色主题 */
[data-theme="dark"] {
  --color-bg: #101412;
  --color-surface: #181f1b;
  --color-surface-elevated: #202924;
  --color-text: #e6eae5;
  --color-text-muted: #9aa69c;
  --color-text-faint: #6e7a71;
  --color-border: #2a332e;
  --color-border-strong: #3a463f;
  --color-primary: #74c198;
  --color-primary-hover: #92d4b0;
  --color-primary-soft: rgba(116, 193, 152, 0.13);
  --color-accent: #d4b76a;
  --color-accent-soft: rgba(212, 183, 106, 0.14);
  --color-danger: #e07a6c;
  --color-hero-from: #17211d;
  --color-hero-to: #101412;
  --color-overlay: rgba(0, 0, 0, 0.55);
  --color-focus: #74c198;
  --color-demo: #e0c06a;
  --color-demo-bg: rgba(212, 183, 106, 0.14);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 8px 22px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.42);
  --shadow-focus: 0 0 0 3px rgba(116, 193, 152, 0.32);
}

/* 系统深色且未手动指定时（由 JS 设置 data-theme，此处作兜底） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --color-bg: #101412;
    --color-surface: #181f1b;
    --color-surface-elevated: #202924;
    --color-text: #e6eae5;
    --color-text-muted: #9aa69c;
    --color-text-faint: #6e7a71;
    --color-border: #2a332e;
    --color-border-strong: #3a463f;
    --color-primary: #74c198;
    --color-primary-hover: #92d4b0;
    --color-primary-soft: rgba(116, 193, 152, 0.13);
    --color-accent: #d4b76a;
    --color-accent-soft: rgba(212, 183, 106, 0.14);
    --color-danger: #e07a6c;
    --color-hero-from: #17211d;
    --color-hero-to: #101412;
    --color-overlay: rgba(0, 0, 0, 0.55);
    --color-focus: #74c198;
    --color-demo: #e0c06a;
    --color-demo-bg: rgba(212, 183, 106, 0.14);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 8px 22px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.42);
    --shadow-focus: 0 0 0 3px rgba(116, 193, 152, 0.32);
  }
}