/* 主题：淡红（浅底暖粉 + 正红点缀）
 *
 * 只覆盖变量，不复制任何布局规则。
 * 换主题 = 换这一个文件，style.css 不动。
 *
 * 设计取向：
 * - 底色是极浅的暖粉白（不是纯白，也不是粉得发腻的粉），
 *   像宣纸上洇了一层很淡的胭脂，有温度但不刺眼。
 * - 正文用深暖褐，不用纯黑 —— 纯黑压在粉底上会显脏。
 * - 主色正红只出现在按钮、数字、序号、标签，面积小、频率低。
 */

:root {
  /* —— 底色：极浅暖粉，三层递进 —— */
  --bg: #fff8f7;
  --bg-2: #fdeeec;
  --bg-3: #fbe3e0;

  /* —— 线：粉灰，不能太红否则整页发胀 —— */
  --line: #f0d5d1;
  --line-soft: #f8e4e1;
  --line-hi: #e2b6b0;

  /* —— 字：深暖褐 + 两档灰 —— */
  --text: #2e1f1c;
  --text-2: #6b524c;
  --text-3: #9c837d;

  /* —— 强调：正红 —— */
  --accent: #cf3a30;
  --accent-deep: #ac2921;
  --accent-soft: rgba(207, 58, 48, .09);
  --accent-ink: #ffffff;

  /* —— 辅助：古铜金 —— */
  --second: #a67c2e;

  --radius: 14px;
}

/* ---------- 首屏：浅粉底上铺一点红光 + 细网格 ---------- */

.hero-slider { background: var(--bg); }

.hero-slider::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 62% 48% at 50% 12%, rgba(207, 58, 48, .10), transparent 70%),
    radial-gradient(ellipse 52% 44% at 84% 4%, rgba(166, 124, 46, .09), transparent 70%),
    linear-gradient(to right, rgba(46, 31, 28, .026) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(46, 31, 28, .026) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 72px 72px, 72px 72px;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 96%);
}

.slides, .slider-ctrl { position: relative; z-index: 1; }

.art-ring {
  background: radial-gradient(closest-side, rgba(207, 58, 48, .13), transparent 70%);
}

/* ---------- 各区块底色 ---------- */

.section, .pillars { background: var(--bg); }

.section-alt {
  background: var(--bg-2);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.readshow {
  background: var(--bg-2);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.footer {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}

/* ---------- 顶栏 ---------- */

.nav.is-scrolled {
  background: rgba(255, 248, 247, .88);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 1px 16px -10px rgba(46, 31, 28, .28);
}

/* ---------- 卡片：浅底上用白卡，不要半透明 ---------- */

.pillar, .card, .steps li, .fact, .contact-item,
.art-card, .art-stats > div, .mock {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 16px 36px -34px rgba(46, 31, 28, .5);
}

.art-phone, .read-phone { background: #fff; }

/* 手机屏内用浅粉，和外侧白卡拉开层次 */
.art-screen, .read-screen, .mock-body { background: var(--bg-2); }

.pillar:hover, .card:hover, .steps li:hover {
  border-color: var(--line-hi);
  box-shadow: 0 26px 52px -32px rgba(46, 31, 28, .45);
}

.card::before, .pillar::before { background: var(--accent); }

/* ---------- 按钮：红底白字 ---------- */

.ms-btn, .btn-solid {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 10px 24px -14px rgba(207, 58, 48, .7);
}
.ms-btn:hover, .btn-solid:hover {
  background: var(--accent-deep);
  color: #ffffff;
  box-shadow: 0 14px 30px -14px rgba(207, 58, 48, .85);
}

.ms-link, .hero-link, .pillar-link { color: var(--accent); }

/* ---------- 轮播控制条 ---------- */

.ctrl-arrow, .ctrl-play {
  background: #fff;
  border-color: var(--line-hi);
  color: var(--text-2);
}
.ctrl-arrow:hover { border-color: var(--accent); color: var(--accent); }

.play-icon {
  border-left-color: var(--text-2);
  border-right-color: var(--text-2);
}
.ctrl-play.is-paused .play-icon { border-left-color: var(--text-2); }

.seg { background: var(--line); }
.seg.is-on { background: var(--line-hi); }
.seg.is-on::after { background: var(--accent); }

.dot { background: var(--line-hi); }
.dot.is-on { background: var(--accent); }

/* ---------- 标签 / 注释锚点 ---------- */

.al, .rs-line, .mock-line, .ph-line { background: var(--line-soft); }

.rs-note, .art-hi, .slide-badge, .rs-tag {
  background: var(--accent-soft);
  color: var(--accent);
}

.rs-tip { border-left-color: var(--accent); color: var(--text-3); }

/* 动态标签：技术用古铜金，公司用墨绿，三种色分开 */
.tag-tech { color: var(--second); border-color: rgba(166, 124, 46, .3); background: rgba(166, 124, 46, .08); }
.tag-company { color: #4a7c59; border-color: rgba(74, 124, 89, .28); background: rgba(74, 124, 89, .07); }

/* 书脊：浅底上可以正常用色 */
.bk-sg  { background: linear-gradient(180deg, #b04a3e, #7d2f26); }
.bk-hlm { background: linear-gradient(180deg, #96435f, #63293f); }
.bk-shz { background: linear-gradient(180deg, #47795a, #2c5238); }
.bk-xyj { background: linear-gradient(180deg, #bd8a39, #8a6126); }

/* ---------- 页脚 ---------- */

.footer-nav h4 { color: var(--text); }
.footer-brand p, .footer-nav a, .footer-bottom { color: var(--text-3); }
.footer-nav a:hover { color: var(--accent); }

/* ---------- 选中态 ---------- */

::selection { background: rgba(207, 58, 48, .18); color: var(--text); }