/* ─────────────────────────────────────────────────
   opera.css · 京剧脸谱风 · 墨黑戏台 + 朱红鎏金 + 宣纸白
   taste-skill 原则：戏剧张力但克制，不堆砌
   字体引入见 index.html Google Fonts <link>
────────────────────────────────────────────────── */

:root {
  /* ── 字体：戏文宋体标题 + 毛笔书法装饰 + 干净正文 ── */
  --font-display: "Noto Serif SC", "Songti SC", "Fraunces", serif;
  --font-script: "Ma Shan Zheng", "Noto Serif SC", cursive;
  --font-body: "Outfit", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;

  /* ── 墨黑戏台配色（taste: 暖墨非纯黑 + 单一主色朱红 + 金为辅）── */
  --color-bg: #15100d;            /* 暖墨黑戏台底 */
  --color-bg-deep: #0d0907;
  --color-card: #1f1813;          /* 深墨卡面 */
  --color-card-header: #271e16;
  --color-text: #f1e7d6;          /* 宣纸白 */
  --color-text-soft: #ab9b80;     /* 暖灰旧纸 */
  --color-accent: #c5283d;        /* 脸谱朱红 */
  --color-accent-deep: #9c1d2e;   /* 深朱 */
  --color-accent-text: #f1e7d6;
  --color-gold: #c9a227;          /* 鎏金勾线 */
  --color-gold-soft: rgba(201, 162, 39, 0.5);
  --color-border: rgba(201, 162, 39, 0.26);     /* 金调描边 */
  --color-border-soft: rgba(201, 162, 39, 0.13);

  /* ── 顶栏：更深的墨（与戏台同色温）── */
  --color-topbar: rgba(13, 9, 7, 0.92);
  --color-topbar-text: #ecdcbd;
  --color-topbar-border: rgba(201, 162, 39, 0.3);

  --color-action-bg: rgba(201, 162, 39, 0.07);
  --color-action-bg-hover: rgba(197, 40, 61, 0.2);

  /* ── 阴影：深墨投影带朱红微光 ── */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 34px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 26px 64px rgba(0, 0, 0, 0.6);
}

/* ── 戏台聚光氛围（朱红 + 鎏金双侧光，破除平铺死黑）── */
body {
  background-image:
    radial-gradient(1000px 560px at 50% -12%, rgba(201, 162, 39, 0.13), transparent 62%),
    radial-gradient(760px 520px at 88% 6%, rgba(197, 40, 61, 0.12), transparent 56%),
    radial-gradient(700px 520px at -6% 12%, rgba(197, 40, 61, 0.08), transparent 55%);
  background-attachment: fixed;
}
/* ── 颗粒质感（深底版，破除数字平面感）── */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─────── 戏曲装饰增强（覆盖 base.css）─────── */

/* 顶栏 OKO 改鎏金书法感 */
.topbar-oko { font-family: var(--font-script); font-weight: 400; font-size: 1.15rem; color: var(--color-gold); letter-spacing: 0.04em; }

/* Gate 印章：朱红方印 + 金边脸谱圆 */
.gate-card { background: var(--color-card); }
.gate-card::before { background: linear-gradient(90deg, transparent, var(--color-gold), transparent); }
.gate-seal {
  border: 2px solid var(--color-gold);
  background: radial-gradient(circle at 50% 38%, var(--color-accent), var(--color-accent-deep));
  color: var(--color-text);
  box-shadow: 0 0 0 4px rgba(197, 40, 61, 0.18);
}
.gate-seal-text { font-family: var(--font-script); font-size: 1.3rem; }
.gate-overline, .hero-overline {
  font-family: var(--font-body);
  color: var(--color-accent);
}

/* Hero 大标题：朱红印章方块前缀 + 鎏金细线 */
.hero { border-bottom: 1px solid var(--color-border); position: relative; }
.hero-title { color: var(--color-text); }
.hero-title::first-letter { color: var(--color-accent); }
.hero-overline {
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.hero-overline::before {
  content: ''; width: 18px; height: 18px;
  background: var(--color-accent);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);  /* 朱红菱印 */
  flex: none;
}
.hero-stats .kpi-value strong { color: var(--color-gold); }

/* CTA：朱红实心 + 金描边（戏台主角色） */
.btn-hero-primary {
  background: var(--color-accent); color: var(--color-text);
  border: 1px solid var(--color-gold);
}
.btn-hero-primary:hover { background: var(--color-accent-deep); }
.btn-hero-primary .cta-glyph { color: var(--color-gold); }

/* 月份标题：金底线 + 朱红章 */
.month-header { border-bottom-color: var(--color-gold); color: var(--color-text); }
.month-header::after { color: var(--color-gold); }
.type-group-title { color: var(--color-gold); }
.type-group-title::after { background: var(--color-gold-soft); }

/* 卡片：金细描边 + hover 朱红勾边（脸谱勾脸感） */
.card { border-color: var(--color-border-soft); }
.card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-accent); }
.card-caption { color: var(--color-text); }
.card-type-badge {
  background: rgba(13, 9, 7, 0.7); color: var(--color-gold);
  border: 1px solid var(--color-gold-soft);
}
.card-time strong { color: var(--color-gold); }
.card-time::before { background: var(--color-accent); }
.card-hashtags { color: var(--color-text-soft); }

/* 主按钮：朱红（脸谱主色），次按钮金描边 */
.btn-action-primary { background: var(--color-accent); color: var(--color-text); border-color: var(--color-accent); }
.btn-action-primary:hover { background: var(--color-accent-deep); border-color: var(--color-gold); }
.btn-share:hover { background: var(--color-accent); border-color: var(--color-gold); color: var(--color-text); }

/* Toast：朱红 */
.toast { background: var(--color-accent); color: var(--color-text); border: 1px solid var(--color-gold); }