/*
 * lizizai-blog-theme.css v1.0
 * 共享主题样式 — 供 iframe 内 HTML 内容使用
 * 部署路径: {R2_PUBLIC_URL}/themes/lizizai-blog-theme.css
 *
 * 设计系统来源: DESIGN.md + app/globals.css
 * 色彩空间: OKLCH | 深色模式专用
 */

/* ─── Google Fonts ─── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=Noto+Serif+SC:wght@400;700;900&family=Instrument+Sans:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

/* ─── 1. Design Tokens ─── */
:root {
  /* 背景 */
  --color-background: oklch(0.141 0.004 286);       /* #09090b 近纯黑 */
  --color-surface: oklch(0.21 0.006 286);            /* #18181b 卡片底色 */
  --color-surface-elevated: oklch(0.274 0.006 286);  /* #27272a 悬浮元素 */

  /* 文字 */
  --color-text-primary: oklch(0.985 0.001 106);      /* #fafaf9 暖白 */
  --color-text-secondary: oklch(0.687 0.016 58);     /* #a8a29e 暖灰 */
  --color-text-muted: oklch(0.553 0.012 58);          /* #78716c 淡暖灰 */

  /* 主色 — 琥珀金 */
  --color-primary: oklch(0.666 0.157 58);             /* #d97706 */
  --color-primary-hover: oklch(0.76 0.16 58);         /* #f59e0b 亮金 */
  --color-primary-foreground: oklch(0.15 0 0);        /* 深色文字 */

  /* 边框 */
  --color-border: oklch(0.274 0.006 286);             /* #27272a */
  --color-border-hover: oklch(0.336 0.008 286);       /* #3f3f46 */

  /* 语义色 */
  --color-success: #22c55e;
  --color-warning: #eab308;
  --color-error: #ef4444;
  --color-info: #06b6d4;

  /* 字体栈 */
  --font-title: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  --font-body: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body-en: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;

  /* 间距 (8px 基准) */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* 排版 */
  --line-height-body: 1.8;
  --line-height-title: 1.35;
  --reading-width: 680px;

  /* 动画 */
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --duration-micro: 80ms;
  --duration-short: 200ms;
  --duration-medium: 300ms;
}

/* ─── 2. Base Reset & Typography ─── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-background);
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: var(--line-height-body);
  font-feature-settings: 'rlig' 1, 'calt' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 标题 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  color: var(--color-text-primary);
  line-height: var(--line-height-title);
}

h1 { font-size: 32px; font-weight: 900; margin-bottom: var(--space-lg); }
h2 { font-size: 24px; font-weight: 700; margin-bottom: var(--space-md); }
h3 { font-size: 20px; font-weight: 700; margin-bottom: var(--space-md); }
h4 { font-size: 18px; font-weight: 600; margin-bottom: var(--space-sm); }
h5 { font-size: 16px; font-weight: 600; margin-bottom: var(--space-sm); }
h6 { font-size: 15px; font-weight: 600; margin-bottom: var(--space-sm); }

/* 段落 */
p {
  margin-bottom: var(--space-lg);
  color: var(--color-text-secondary);
}

p:last-child {
  margin-bottom: 0;
}

/* 链接 */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-short) var(--ease-enter);
}

a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

/* 列表 */
ul, ol {
  margin-bottom: var(--space-lg);
  padding-left: var(--space-lg);
}

li {
  margin-bottom: var(--space-xs);
  color: var(--color-text-secondary);
}

/* 代码 */
code {
  font-family: var(--font-mono);
  font-size: 14px;
  background: var(--color-surface);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-primary);
}

pre {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  background: var(--color-surface);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: var(--space-lg);
  border: 1px solid var(--color-border);
}

pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: inherit;
}

/* 引用 */
blockquote {
  border-left: 3px solid var(--color-primary);
  padding: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-lg);
  background: var(--color-surface);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

blockquote p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xs);
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* 强调 */
strong {
  color: inherit;
  font-weight: 600;
}

/* 图片 */
img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

/* 分隔线 */
hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-2xl) 0;
}

/* ─── 3. 阅读容器 ─── */
.prose {
  max-width: var(--reading-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.prose-wide {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.prose-full {
  max-width: 100%;
}

/* ─── 4. 组件样式 ─── */

/* 卡片 */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  transition: border-color var(--duration-short) var(--ease-enter);
}

.card:hover {
  border-color: var(--color-border-hover);
}

/* 标签/Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  background: var(--color-surface);
}

.badge--primary {
  color: var(--color-primary);
  border-color: oklch(0.666 0.08 58);
  background: oklch(0.21 0.04 58);
}

/* 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all var(--duration-short) var(--ease-enter);
  font-family: var(--font-body);
}

.btn:hover {
  background: var(--color-surface-elevated);
  border-color: var(--color-border-hover);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  border-color: transparent;
}

.btn--primary:hover {
  background: var(--color-primary-hover);
}

/* 表格 */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: var(--space-lg);
}

.data-table th {
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-weight: 600;
  text-align: left;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
}

.data-table td {
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.data-table tr:hover td {
  background: var(--color-surface);
}

/* 提示框 */
.callout {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  border: 1px solid;
}

.callout--info {
  background: oklch(0.18 0.02 220);
  border-color: oklch(0.3 0.06 220);
  color: var(--color-info);
}

.callout--warning {
  background: oklch(0.19 0.03 90);
  border-color: oklch(0.35 0.08 90);
  color: var(--color-warning);
}

.callout--error {
  background: oklch(0.19 0.04 25);
  border-color: oklch(0.35 0.08 25);
  color: var(--color-error);
}

.callout--success {
  background: oklch(0.18 0.03 145);
  border-color: oklch(0.32 0.06 145);
  color: var(--color-success);
}

.callout p {
  margin-bottom: var(--space-xs);
}

.callout p:last-child {
  margin-bottom: 0;
}

/* 分隔卡片 */
.divider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-2xl) 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* ─── 5. KaTeX 公式 ─── */
.katex { color: var(--color-text-primary); }
.katex-display { margin: 1.5rem 0; overflow-x: auto; }

/* ─── 6. 响应式 ─── */
@media (max-width: 768px) {
  body { font-size: 16px; }
  h1 { font-size: 26px; }
  h2 { font-size: 20px; }
  h3 { font-size: 18px; }
  .prose { padding: 0 var(--space-sm); }
}