/*
 * 玄学工具箱 · 清明视觉系统
 * 全站共用的颜色、字号、间距与表面样式。
 * 原有组件变量保留为语义别名，页面不再各自维护调色板。
 */
:root {
  color-scheme: light;
  --ui-bg: #f6f8f9;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f2f6f7;
  --ui-text: #23343b;
  --ui-heading: #172e35;
  --ui-muted: #60747c;
  --ui-subtle: #60747c;
  --ui-border: #e0e8eb;
  --ui-border-strong: #b9ced1;
  --ui-primary: #167c80;
  --ui-primary-hover: #10666a;
  --ui-primary-soft: #e9f5f4;
  --ui-primary-line: #bbdbd8;
  --ui-success: #28764f;
  --ui-danger: #b74c52;
  --ui-warning: #936414;
  --ui-blue: #376fa1;
  --ui-violet: #7763a4;
  --ui-on-primary: #ffffff;
  --ui-shadow: 0 3px 16px rgb(27 58 66 / 4%);
  --ui-shadow-raised: 0 12px 36px rgb(27 58 66 / 9%);
  --ui-radius: 16px;
  --ui-radius-sm: 10px;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  --ui-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ui-serif: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "STSong", serif;

  --bg: var(--ui-bg);
  --ink: var(--ui-bg);
  --ink-2: var(--ui-surface-soft);
  --panel: var(--ui-surface);
  --panel2: var(--ui-surface);
  --card: var(--ui-surface);
  --card-2: var(--ui-surface);
  --night: var(--ui-bg);
  --night-2: var(--ui-surface);
  --violet: var(--ui-primary-soft);
  --violet-2: var(--ui-surface-soft);
  --amethyst: var(--ui-violet);
  --paper: var(--ui-text);
  --paper-dim: var(--ui-muted);
  --paper-mute: var(--ui-muted);
  --muted: var(--ui-muted);
  --gold: var(--ui-primary);
  --gold2: var(--ui-primary);
  --gold-soft: var(--ui-primary);
  --gold-bright: var(--ui-heading);
  --gold-deep: var(--ui-primary-hover);
  --gold-dim: var(--ui-primary-line);
  --gold-line: var(--ui-border);
  --line: var(--ui-border);
  --line2: var(--ui-border-strong);
  --line-strong: var(--ui-border-strong);
  --good: var(--ui-success);
  --green: var(--ui-success);
  --bad: var(--ui-danger);
  --red: var(--ui-danger);
  --warn: var(--ui-warning);
  --amber: var(--ui-warning);
  --blue: var(--ui-blue);
  --water: var(--ui-blue);
  --sun: #a46d14;
  --moon: var(--ui-blue);
  --asc: var(--ui-violet);
  --mc: var(--ui-primary);
  --shadow: var(--ui-shadow);
  --r: var(--ui-radius);
  --radius: var(--ui-radius);
  --sans: var(--ui-sans);
  --serif: var(--ui-serif);
  --serif-cn: var(--ui-serif);
  --display: var(--ui-serif);
  --xz-radius: var(--ui-radius);
  --xz-radius-sm: var(--ui-radius-sm);
  --xz-line: var(--ui-border);
  --xz-line-strong: var(--ui-border-strong);
  --xz-card: var(--ui-surface);
  --xz-card-2: var(--ui-surface);
  --xz-gold: var(--ui-primary);
  --xz-gold-soft: var(--ui-primary);
  --xz-gold-bright: var(--ui-heading);
  --xz-paper: var(--ui-text);
  --xz-muted: var(--ui-muted);
  --xz-shadow: var(--ui-shadow);
  --xz-serif: var(--ui-serif);
  --xz-read: var(--ui-text);
  --xz-label: var(--ui-muted);
  --xz-rule: var(--ui-border);
  --xz-rule-soft: var(--ui-border);
  --xz-good: var(--ui-success);
  --xz-bad: var(--ui-danger);
  --xz-blue: var(--ui-blue);
}

/* 塔罗旧样式中的 ink 表示前景色，其他模块表示背景色。 */
body[data-tool="tarot"] { --ink: var(--ui-text); --ink-2: var(--ui-muted); }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--ui-bg); color: var(--ui-text); font: 1rem/1.65 var(--ui-sans); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: not-allowed; opacity: .55; }
input, textarea, select { accent-color: var(--ui-primary); }
input::placeholder, textarea::placeholder { color: var(--ui-subtle); opacity: 1; }
::selection { background: #d1ebe8; color: var(--ui-heading); }
:focus-visible { outline: 3px solid #82bdbb; outline-offset: 3px; }
[hidden] { display: none !important; }
svg { flex-shrink: 0; }
.skip-link { position: fixed; z-index: 10001; left: 16px; top: 12px; padding: 10px 16px; background: white; color: var(--ui-primary); border: 1px solid var(--ui-primary); border-radius: 8px; transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}