/**
 * theme.css — 主题变量与配色
 *
 * 采用 CSS 自定义变量驱动，深浅两套主题通过 <html data-theme="dark"> 切换。
 * 配色取自中式传统色：宣纸、墨、朱砂、青黛、金、竹青。
 * 排版以宋体系为主（更贴近古籍观感），数字与干支表格用等宽字体保证对位。
 */

:root {
  /* 间距阶梯：4 / 8 / 12 / 16 / 24 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;

  /* 圆角：≤10px，走克制路线 */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 10px;

  /* 边框统一 1px，少阴影 */
  --border-w: 1px;

  /* 字体 */
  --font-serif: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", serif;
  --font-mono: "SFMono-Regular", "Menlo", "Consolas", "Courier New", monospace;

  --max-w: 640px;
}

/* ── 浅色（宣纸） ─────────────────────────────────────────────── */
:root,
:root[data-theme="light"] {
  --bg: #F7F3EA;          /* 宣纸底 */
  --bg-soft: #FFFDF7;     /* 卡片底 */
  --bg-sunken: #EFE9DC;   /* 内凹区域 */
  --fg: #22201C;          /* 墨黑正文 */
  --fg-muted: #6B6459;    /* 次要文字 */
  --fg-faint: #9A9284;    /* 弱化文字 */
  --border: #DCD3C2;
  --border-strong: #C6BBA6;

  --cinnabar: #B23A2E;    /* 朱砂：主强调、动爻 */
  --indigo: #2E5A6B;      /* 青黛：次级强调、链接 */
  --gold: #B08D3F;        /* 金：标签、贵气 */
  --bamboo: #4B7A52;      /* 竹青：吉、正向 */

  --danger: #B23A2E;
  --ok: #4B7A52;

  --shadow: 0 1px 2px rgba(34, 32, 28, 0.06);
  --yao-yang: #22201C;    /* 阳爻 */
  --yao-yin: #22201C;

  /* 极淡的宣纸光晕：只做一层自上而下的暖色渐变，不用纹理图、不堆装饰 */
  --bg-vignette: rgba(176, 141, 63, 0.07);
}

/* ── 深色（墨底） ─────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --bg: #17181A;          /* 墨底 */
  --bg-soft: #1F2124;
  --bg-sunken: #121315;
  --fg: #D8C9A3;          /* 淡金正文 */
  --fg-muted: #A79C82;
  --fg-faint: #7E7563;
  --border: #33353A;
  --border-strong: #464951;

  --cinnabar: #D9604F;    /* 朱砂（提亮以保对比度） */
  --indigo: #6FA3B5;      /* 青 */
  --gold: #C9A961;
  --bamboo: #6E9B75;

  --danger: #D9604F;
  --ok: #6E9B75;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --yao-yang: #D8C9A3;
  --yao-yin: #D8C9A3;

  --bg-vignette: rgba(201, 169, 97, 0.07);
}

/* ── 基础重置 ────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  /* 底部 Tab 栏高度 + 安全区，避免内容被遮住 */
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* 数字、干支、时刻用等宽，保证表格对位 */
.num, .mono, table td.gz, .clock {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

::selection { background: var(--gold); color: var(--bg); }