/* ============================================================
   中医学习工具平台 - 统一设计系统
   仅包含：Reset、色彩/字号/间距/圆角/阴影/动画 Token、基础排版
   组件样式请使用 tools-common.css
   ============================================================ */

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background: var(--parchment);
  color: var(--text);
  min-height: 100vh;
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Color System --- */
:root {
  /* 朱砂色系 */
  --cinnabar: #8B0000;
  --cinnabar-lt: #C41E3A;
  --cinnabar-dk: #5C0000;
  --cinnabar-50: #FDF2F0;
  --cinnabar-100: #F8D7D0;

  /* 古铜金色系 */
  --gold: #D4A574;
  --gold-lt: #E8D5B0;
  --gold-dk: #BF8C35;
  --gold-50: #FEF8F0;
  --gold-100: #FAEEDA;

  /* 松柏绿 */
  --pine: #2D5A27;
  --pine-lt: #4A7A44;
  --pine-50: #EEF5EC;
  --pine-100: #C8DDC3;

  /* 艾草绿 */
  --mugwort: #5B8C5A;
  --mugwort-50: #F0F7EF;
  --mugwort-100: #D0E5CF;

  /* 赭石色 */
  --ochre: #CC7722;
  --ochre-50: #FBF3E8;
  --ochre-100: #F5DFC0;

  /* 靛青色 */
  --indigo: #3B4A7A;
  --indigo-50: #EEF0F5;
  --indigo-100: #C8CFDD;

  /* 宣纸色系 */
  --parchment: #F5F0E6;
  --parchment-dk: #EDE6D8;
  --parchment-card: #FCFAF6;
  --parchment-card-hv: #F8F4EC;

  /* 语义色 */
  --green: #2E7D32;
  --green-lt: #4CAF50;
  --green-50: #E8F5E9;
  --red: #C62828;
  --red-lt: #EF5350;
  --red-50: #FFEBEE;
  --orange: #E65100;
  --orange-50: #FFF3E0;
  --blue: #1565C0;
  --blue-lt: #42A5F5;
  --blue-50: #E3F2FD;
  --purple: #6A1B9A;
  --purple-50: #F3E5F5;

  /* 功能性 */
  --text: #2C2416;
  --text-mid: #5C5446;
  --text-light: #9B8F80;
  --border: #E0D5C5;
  --border-lt: #EDE6D8;
  --border-hv: #D0C5B5;

  /* 操作分级色 */
  --level-basic: #4A7A44;
  --level-clinical: #CC7722;
  --level-danger: #C62828;

  /* 兼容别名 */
  --primary: var(--cinnabar);
  --primary-light: var(--cinnabar-lt);
  --primary-dark: var(--cinnabar-dk);
  --primary-bg: var(--parchment);
  --accent: var(--gold);
  --bg: var(--parchment);
  --bg-card: var(--parchment-card);
  --text-secondary: var(--text-mid);
  --text-muted: var(--text-light);
  --success: #2E7D32;
  --success-bg: #E8F5E9;
  --danger: #C62828;
  --danger-bg: #FFEBEE;
  --warning: #E65100;
  --warning-bg: #FFF3E0;
  --info: #1565C0;
  --info-bg: #E3F2FD;
  --ink: var(--text);
  --cinnabar-glow: rgba(139, 0, 0, 0.15);
  --cinnabar-light: #F8D7D0;
  --border-warm: var(--border);
  --text-tertiary: var(--text-light);
  --bg-warm: var(--parchment);
  --surface: var(--parchment-card);
  --surface-warm: var(--parchment-card-hv);
  --bg-hv: var(--parchment-card-hv);
  --success-light: #E8F5E9;

  /* tools-common 兼容别名 */
  --color-primary: var(--cinnabar);
  --color-primary-light: var(--cinnabar-lt);
  --color-primary-dark: var(--cinnabar-dk);
  --color-primary-ghost: var(--cinnabar-50);
  --color-bg: var(--parchment);
  --color-surface: var(--parchment-card);
  --color-surface-hover: var(--parchment-card-hv);
  --color-text: var(--text);
  --color-text-secondary: var(--text-mid);
  --color-text-muted: var(--text-light);
  --color-border: var(--border);
  --color-border-hover: var(--border-hv);
  --color-success: var(--green);
  --color-warning: var(--orange);
  --color-danger: var(--red);
}

/* --- Typography --- */
:root {
  /* 字体 */
  --font-serif: 'Noto Serif SC', 'Songti SC', 'SimSun', Georgia, serif;
  --font-kai: 'LXGW WenKai', 'KaiTi', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;

  /* 字号体系 */
  --text-2xs: 0.625rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;

  /* 行高 */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* 字重 */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
}

/* --- Spacing & Layout --- */
:root {
  /* 标准间距 (8px基准) */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* 间距别名 */
  --xs: var(--space-xs);
  --sm: var(--space-sm);
  --md: var(--space-md);
  --lg: var(--space-lg);
  --xl: var(--space-2xl);

  /* 内容宽度 */
  --content-max: 1100px;
  --content-px: 24px;
  --content-width: 960px;
  --tool-page-max: 1100px;
  --tool-phone-max: 520px;
}

/* --- Border Radius --- */
:root {
  --radius-sm: 6px;
  --radius: 10px;
  --radius-md: var(--radius);
  --radius-lg: 14px;
  --radius-xl: 20px;
}

/* --- Shadows --- */
:root {
  --shadow-0: none;
  --shadow-1: 0 1px 3px rgba(92,82,72,0.06);
  --shadow-2: 0 2px 8px rgba(92,82,72,0.08);
  --shadow-3: 0 4px 16px rgba(92,82,72,0.10);
  --shadow-4: 0 8px 32px rgba(92,82,72,0.12);
  --shadow-5: 0 16px 48px rgba(92,82,72,0.16);
  --shadow: var(--shadow-2);
  --shadow-lg: var(--shadow-4);
  --shadow-hover: var(--shadow-5);
  --shadow-sm: var(--shadow-1);
  --shadow-md: var(--shadow-3);
}

/* --- Animation --- */
:root {
  /* 动画时长 */
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 350ms;
  --duration-slower: 500ms;

  /* 缓动曲线 */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* --- Dark Mode --- */
@media (prefers-color-scheme: dark) {
  :root {
    --parchment: #1C1A18;
    --parchment-dk: #141210;
    --parchment-card: #262320;
    --parchment-card-hv: #322E2A;
    --text: #E8E0D8;
    --text-mid: #A09890;
    --text-light: #706860;
    --border: #3A3430;
    --border-lt: #2E2A26;
    --border-hv: #4A4440;
    --cinnabar: #D44038;
    --cinnabar-lt: #E86050;
    --cinnabar-dk: #A02018;
    --cinnabar-50: #2E1814;
    --cinnabar-100: #3E2018;
    --gold: #C89858;
    --gold-lt: #D8B078;
    --gold-50: #2E2418;
    --gold-100: #3E3018;
    --green: #3D8B40;
    --green-lt: #58B860;
    --blue: #3580D0;
    --red: #E04848;
    --orange: #E86820;
    --purple: #8050A0;
  }
}

/* --- Selection --- */
::selection {
  background: var(--cinnabar-100);
  color: var(--cinnabar-dk);
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

/* --- Table --- */
table { width: 100%; overflow-wrap: break-word; }
.table-wrap, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }