/**
 * monet-theme.css
 * 全站色彩中枢 + 玻璃拟态工具类。
 * 所有颜色通过 CSS 变量定义，后续换主题只需改这里。
 */

:root {
  /* === 莫奈核心色（从睡莲、日出印象提取）=== */
  --monet-water-blue:   #8FBCD4;
  --monet-lily-green:   #A8C5A8;
  --monet-dawn-pink:    #E8C4C4;
  --monet-lavender:     #B8A9C9;
  --monet-sun-gold:     #D4C4A8;
  --monet-mist-white:   #F5F0E8;
  --monet-deep-ink:     #3D3D3D;
  --monet-soft-gray:    #C4BFB5;
  --monet-rose-mist:    #D4A5A5;
  --monet-pure-white:   #FFFFFF;

  /* === 功能映射（组件只引用这些，不直接引用莫奈色）=== */
  --color-bg:           var(--monet-mist-white);
  --color-surface:      var(--monet-pure-white);
  --color-text:         var(--monet-deep-ink);
  --color-text-muted:   var(--monet-soft-gray);
  --color-primary:      var(--monet-water-blue);
  --color-success:      var(--monet-lily-green);
  --color-accent:       var(--monet-dawn-pink);
  --color-border:       rgba(143, 188, 212, 0.25);

  /* === 字体 === */
  --font-sans:  -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Noto Sans SC", sans-serif;
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Georgia", serif;

  /* === 间距（8px 基数，Apple/Notion 风格）=== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* === 圆角 === */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* === 阴影（极柔和，几乎看不见）=== */
  --shadow-sm: 0 1px 2px rgba(61, 61, 61, 0.04);
  --shadow-md: 0 4px 16px rgba(61, 61, 61, 0.06);
  --shadow-lg: 0 8px 32px rgba(61, 61, 61, 0.08);

  /* === 动画 === */
  --transition-fast:  150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:  250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:  400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* === 玻璃拟态工具类（Arc Browser 风格）=== */
.glass {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.glass-dark {
  background: rgba(30, 30, 30, 0.65);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* === 卡片基础（Notion 风格：内容即界面）=== */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* === 按钮 === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  transition: all var(--transition-fast);
  background: var(--color-primary);
  color: #fff;
}

.btn:hover {
  opacity: 0.85;
  transform: scale(1.02);
}

/* === 输入框 === */
.input {
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 15px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(143, 188, 212, 0.15);
}

/* === 文字工具类 === */
.text-muted { color: var(--color-text-muted); }
.text-sm { font-size: 14px; }
.text-lg { font-size: 18px; }
.text-xl { font-size: 24px; }
.text-2xl { font-size: 32px; }
.text-3xl { font-size: 48px; }
.font-serif { font-family: var