:root {
  /* === Brand Colors — Dark Literary Theme (默认) === */
  --color-primary: #D4A853;
  --color-primary-hover: #E8BE6A;
  --color-primary-subtle: rgba(212, 168, 83, 0.1);
  --color-background: #1A1612;
  --color-background-elevated: #231E18;
  --color-background-surface: #2C2520;
  --color-background-overlay: rgba(26, 22, 18, 0.92);
  --color-text-primary: #E8DFD0;
  --color-text-secondary: #A89888;
  --color-text-tertiary: #786860;
  --color-border: rgba(232, 223, 208, 0.1);
  --color-border-hover: rgba(232, 223, 208, 0.2);

  /* === On-Primary (按钮/徽标上的文字与图标色) === */
  /* dark: 金色 primary 上用近黑文字;light: 棕色 primary 上用白文字 */
  --color-on-primary: #0F0F14;

  /* === Hero (首页大图) === */
  --hero-image-filter: brightness(0.35);
  --hero-overlay-gradient: linear-gradient(to bottom, rgba(15,15,20,0.4) 0%, rgba(15,15,20,0.9) 80%, var(--color-background) 100%);
  --hero-headline-color: var(--color-text-primary);
  --hero-subtext-color: var(--color-text-secondary);

  /* === Detail Hero (详情页顶部背景) === */
  --detail-hero-gradient: linear-gradient(135deg, #2a1f3d 0%, #1a1a24 40%, #0F0F14 100%);
  --detail-hero-accent: radial-gradient(circle at 30% 50%, rgba(212,168,83,0.3), transparent 60%);
  --detail-hero-min-height: 320px;

  /* === Modal Backdrop === */
  --modal-overlay: rgba(0,0,0,0.5);

  /* === State Colors === */
  --state-success: #6AAF6A;
  --state-warning: #D4A853;
  --state-error: #C86060;
  --state-info: #6A9CC8;

  /* === Radius (Literary — small, restrained) === */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-full: 9999px;

  /* === Typography (Literary Editorial) === */
  --font-title: 'Noto Serif SC', 'Source Han Serif CN', Georgia, 'Times New Roman', serif;
  --font-body: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  --leading-tight: 1.3;
  --leading-normal: 1.7;
  --leading-relaxed: 2.0;

  /* === Spacing === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* === Shadow === */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-float: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* 亮色主题 */
.light {
  --color-primary: #8B4513;
  --color-primary-hover: #A0522D;
  --color-primary-subtle: rgba(139, 69, 19, 0.08);
  --color-background: #FDF8F0;
  --color-background-elevated: #FFFFFF;
  --color-background-surface: #F5EDE0;
  --color-background-overlay: rgba(253, 248, 240, 0.9);
  --color-text-primary: #2C1810;
  --color-text-secondary: #6B5B4E;
  --color-text-tertiary: #9C8B7D;
  --color-border: rgba(44, 24, 16, 0.1);
  --color-border-hover: rgba(44, 24, 16, 0.2);

  /* === On-Primary: 棕色 primary 上用白文字 === */
  --color-on-primary: #FFFFFF;

  /* === Hero: 暖棕色遮罩,文字白色 === */
  --hero-image-filter: none;
  --hero-overlay-gradient: linear-gradient(to bottom, rgba(44,24,16,0.55) 0%, rgba(44,24,16,0.75) 100%);
  --hero-headline-color: #FFFFFF;
  --hero-subtext-color: rgba(255,255,255,0.85);

  /* === Detail Hero: light 设计稿无 hero 背景层,直接在 main 中布局 === */
  --detail-hero-gradient: transparent;
  --detail-hero-accent: transparent;
  --detail-hero-min-height: 0;

  /* === Modal Backdrop === */
  --modal-overlay: rgba(44,24,16,0.4);

  --state-success: #5B8C5A;
  --state-warning: #C49A3C;
  --state-error: #B85450;
  --state-info: #5B7FB8;
  --shadow-card: 0 1px 2px rgba(44, 24, 16, 0.04);
  --shadow-float: 0 6px 20px rgba(44, 24, 16, 0.1);
}