/* ==========================================================================
   富利佳官网 — 浅色系主题（暖米白 × 石墨 × 品牌金）
   默认深色；<html data-theme="light"> 时下列覆盖生效。
   本文件须在 style.css 之后引入。
   ========================================================================== */

/* ---------- 主题切换按钮（两种主题都加载） ---------- */
.theme-toggle {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: inherit;
  border: 1px solid rgba(140, 140, 140, 0.4);
  transition: border-color var(--t-fast), background-color var(--t-fast), transform var(--t-fast) var(--ease-apple);
}
.theme-toggle:hover { transform: rotate(18deg); border-color: var(--gold); }
.theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun { display: block; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ---------- 浅色主题令牌 ---------- */
html[data-theme="light"] {
  --bg: #f7f6f2;
  --bg-soft: #efede6;
  --bg-card: #ffffff;
  --line: #e4e1d8;
  --ink: #20242b;
  --muted: #5b6068;
  --graphite: #252c38;
  --gold-deep: #b07c00;
  --shadow-1: 0 2px 12px rgba(32, 36, 43, 0.05);
  --shadow-2: 0 12px 40px rgba(32, 36, 43, 0.1);
}

/* ---------- 导航：白底毛玻璃 + 深色文字 ---------- */
html[data-theme="light"] .nav { color: var(--ink); }
html[data-theme="light"] .nav--solid,
html[data-theme="light"] body.subpage .nav,
html[data-theme="light"].subpage .nav {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 1px 0 rgba(32, 36, 43, 0.08);
}
html[data-theme="light"] .nav-links a:hover { background: rgba(32, 36, 43, 0.06); }
html[data-theme="light"] .brand-text span { opacity: 0.55; }
html[data-theme="light"] .drawer {
  background: rgba(247, 246, 242, 0.97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
html[data-theme="light"] .drawer a { color: var(--ink); border-bottom-color: rgba(32, 36, 43, 0.1); }
html[data-theme="light"] .drawer a:hover { color: var(--gold-deep); }
html[data-theme="light"] .drawer a small { color: #8a8f98; }
html[data-theme="light"] .drawer-tel { color: var(--gold-deep) !important; }

/* ---------- Hero：暖白渐变 + 深色文字 ---------- */
html[data-theme="light"] .hero {
  color: var(--ink);
  background:
    radial-gradient(1000px 520px at 88% 112%, rgba(245, 179, 1, 0.16), transparent 62%),
    linear-gradient(155deg, #fbfaf6 0%, #f2efe7 58%, #eceadf 100%);
}
html[data-theme="light"] .hero-bg { opacity: 0.1; filter: blur(22px) brightness(1.7) saturate(0.9); }
html[data-theme="light"] .hero::after {
  background: linear-gradient(180deg, rgba(247, 246, 242, 0.3), transparent 30%, transparent 70%, rgba(247, 246, 242, 0.6));
}
html[data-theme="light"] .hero-eyebrow { color: #7a6a3a; }
html[data-theme="light"] .hero-en { color: #9a9382; }
html[data-theme="light"] .hero-desc { color: var(--muted); }
html[data-theme="light"] .btn-ghost { color: var(--ink); border-color: rgba(32, 36, 43, 0.3); }
html[data-theme="light"] .btn-ghost:hover { background: rgba(32, 36, 43, 0.06); }
html[data-theme="light"] .hero-cue { color: #9a9382; }
/* 浅色底上金色标题用深金，保证对比度 */
html[data-theme="light"] .hero-title .gold {
  background: none;
  -webkit-text-fill-color: var(--gold-deep);
  color: var(--gold-deep);
}
/* Hero 主视觉：深色用画册扳手照，浅色用透明底镀铬扳手 */
.hero-img-light { display: none; }
html[data-theme="light"] .hero-img-light { display: block; }
html[data-theme="light"] .hero-img-dark { display: none; }
html[data-theme="light"] .hero-visual img { box-shadow: 0 30px 80px rgba(32, 36, 43, 0.16); }

/* ---------- 数据条：品牌金 ---------- */
html[data-theme="light"] .stats { background-image: linear-gradient(135deg, #f5b301, #ffcf4d); }
html[data-theme="light"] .stat { background: rgba(255, 255, 255, 0.16); }
html[data-theme="light"] .stat-num { color: var(--graphite); }
html[data-theme="light"] .stat-label { color: rgba(37, 44, 56, 0.72); }

/* ---------- 深色区块改浅 ---------- */
html[data-theme="light"] .section--navy { background: var(--bg-soft); color: var(--ink); }
html[data-theme="light"] .section--navy .sec-title { color: var(--ink); }
html[data-theme="light"] .section--navy .sec-sub { color: var(--muted); }
html[data-theme="light"] .story-step h3 { color: var(--ink); }
html[data-theme="light"] .story-step p { color: var(--muted); }
html[data-theme="light"] .story-visual-frame { background: #ffffff; box-shadow: 0 24px 70px rgba(32, 36, 43, 0.14); }

/* 联系卡 */
html[data-theme="light"] .contact-card {
  background: #ffffff;
  border-color: var(--line);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme="light"] .contact-item b { color: #8a8f98; }
html[data-theme="light"] .contact-item span,
html[data-theme="light"] .contact-item a { color: var(--ink); }
html[data-theme="light"] .contact-item a:hover { color: var(--gold-deep); }
html[data-theme="light"] .contact-item small { color: var(--muted); }
html[data-theme="light"] .contact-media-col figure { border-color: var(--line); }

/* 子页横幅：浅钢灰渐变 */
html[data-theme="light"] .page-banner {
  background:
    radial-gradient(900px 420px at 88% 120%, rgba(245, 179, 1, 0.14), transparent 60%),
    linear-gradient(150deg, #f5f3ec, #eae7dc 70%, #e3dfd2);
  color: var(--ink);
}
html[data-theme="light"] .page-banner .sec-title { color: var(--ink); }
html[data-theme="light"] .page-banner .sec-sub { color: var(--muted); }
html[data-theme="light"] .crumb { color: #9a9382; }

/* ---------- 底部：金色 CTA + 暖米灰页脚，浅色层次不冲突 ---------- */
html[data-theme="light"] .contact-strip {
  background: linear-gradient(135deg, #f5b301, #ffd45e);
  color: var(--graphite);
  box-shadow: 0 18px 50px rgba(245, 179, 1, 0.25);
}
html[data-theme="light"] .contact-strip p { color: rgba(37, 44, 56, 0.75); }
html[data-theme="light"] .contact-strip .btn-gold {
  background: var(--graphite);
  color: #fff;
  box-shadow: none;
}
html[data-theme="light"] .contact-strip .btn-ghost {
  color: var(--graphite);
  border-color: rgba(37, 44, 56, 0.4);
}
html[data-theme="light"] .contact-strip .btn-ghost:hover { background: rgba(37, 44, 56, 0.08); }

/* 页脚：比页面底深半档的暖米灰 + 深色文字 */
html[data-theme="light"] .footer { background: #eae7dd; color: #6a6f77; }
html[data-theme="light"] .footer-brand { color: var(--ink); }
html[data-theme="light"] .footer-brand small { color: #9a9382; }
html[data-theme="light"] .footer-slogan { color: var(--gold-deep); }
html[data-theme="light"] .footer-line { background: rgba(32, 36, 43, 0.1); }
html[data-theme="light"] .video-toast { background: rgba(37, 44, 56, 0.94); }

/* 表格表头用石墨 */
html[data-theme="light"] table.spec th,
html[data-theme="light"] table.data th { background: var(--graphite); }