/* ============================================================
 * 汉 · 全局基础样式 (Global Base)
 * 仅由 han.css 使用。现有应用请使用 han-scoped.css。
 * 依赖：tokens.css
 * ============================================================ */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  font-family: var(--han-font-serif);
  font-size: var(--han-fs-base);
  font-weight: var(--han-fw-regular);
  line-height: var(--han-lh-normal);
  letter-spacing: var(--han-ls-normal);
  color: var(--han-color-text-primary);
  background-color: var(--han-color-bg);
  background-image: var(--han-bg-pattern,
    radial-gradient(circle at 15% 5%, rgba(42, 40, 36, 0.03) 0%, transparent 40%),
    radial-gradient(circle at 85% 95%, rgba(42, 40, 36, 0.04) 0%, transparent 40%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cfilter id='rice'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.92 0 0 0 0 0.85 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23rice)'/%3E%3C/svg%3E")
  );
  background-attachment: fixed;
  background-repeat: repeat;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: var(--han-space-4);
  font-family: var(--han-font-kai);
  font-weight: var(--han-title-weight, var(--han-fw-bold));
  line-height: var(--han-lh-snug);
  letter-spacing: var(--han-title-spacing, var(--han-ls-wider));
  color: var(--han-color-text-primary);
}

h1 { font-size: var(--han-fs-4xl); }
h2 { font-size: var(--han-fs-3xl); }
h3 { font-size: var(--han-fs-2xl); }
h4 { font-size: var(--han-fs-xl); }
h5 { font-size: var(--han-fs-lg); }
h6 { font-size: var(--han-fs-md); }

p {
  margin-bottom: var(--han-space-4);
  line-height: var(--han-lh-relaxed);
}

blockquote {
  position: relative;
  margin: var(--han-space-6) 0;
  padding: var(--han-space-5) var(--han-space-6);
  font-family: var(--han-font-kai);
  font-size: var(--han-fs-lg);
  line-height: var(--han-lh-relaxed);
  color: var(--han-color-text-secondary);
  background: var(--han-color-bg-surface);
  border: var(--han-border);
  border-left: var(--han-border-width-3) solid var(--han-color-vermilion-500);
  border-radius: var(--han-radius-md);
}

blockquote::before,
blockquote::after {
  position: absolute;
  font-size: var(--han-fs-3xl);
  line-height: 1;
  color: var(--han-color-vermilion-400);
}

blockquote::before {
  top: -8px;
  left: var(--han-space-4);
  content: "「";
}

blockquote::after {
  right: var(--han-space-4);
  bottom: -12px;
  content: "」";
}

a {
  color: var(--han-color-accent-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--han-duration-normal) var(--han-ease-out),
    border-color var(--han-duration-normal) var(--han-ease-out);
}

a:hover {
  color: var(--han-color-accent-text);
  border-bottom-color: var(--han-color-accent-control);
}

ul,
ol {
  padding-inline-start: 1.5em;
}

code {
  padding: 2px 6px;
  font-family: var(--han-font-mono);
  font-size: 0.9em;
  color: var(--han-color-accent-text);
  background: var(--han-color-ink-100);
  border: 1px solid var(--han-color-ink-200);
  border-radius: var(--han-radius-sm);
}

pre {
  padding: var(--han-space-5);
  overflow-x: auto;
  font-family: var(--han-font-mono);
  font-size: var(--han-fs-sm);
  line-height: 1.7;
  color: var(--han-color-paper-100);
  background: var(--han-color-ink-700);
  border-radius: var(--han-radius-lg);
}

pre code {
  padding: 0;
  color: inherit;
  background: none;
  border: none;
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

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

button {
  cursor: pointer;
  background: none;
  border: none;
}

::selection {
  color: var(--han-color-text-primary);
  background: rgba(192, 57, 43, 0.25);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--han-color-ink-100);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--han-color-ink-300);
  border: 2px solid var(--han-color-ink-100);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--han-color-ink-400);
}

* {
  scrollbar-color: var(--han-color-ink-300) var(--han-color-ink-100);
  scrollbar-width: thin;
}

@media (max-width: 768px) {
  html { font-size: 15px; }
  h1 { font-size: var(--han-fs-3xl); }
  h2 { font-size: var(--han-fs-2xl); }
}

@media (max-width: 480px) {
  html { font-size: 14px; }
}