/* ==========================================================================
   瑞普康 Respcare — 浅色主题覆盖层
   作用范围：全站（15 个页面均在 style.css 之后引用本文件）
   回退方式：删掉各页面的 <link rel="stylesheet" href="assets/css/theme-light.css"> 即可
   ========================================================================== */

/* ---------- 0. 浅色底上的次级文字色（保证 AA 对比度 ≥ 4.5） ---------- */
:root {
    --tint-ink:  #52657B;   /* 浅蓝底上的正文/链接，对比度 5.56:1 */
    --tint-mute: #5F7186;   /* 浅蓝底上的小字注释，对比度 4.65:1 */
}

/* ---------- 1. 顶部工具条：深墨蓝 → 浅灰蓝 ---------- */
.utilbar {
    background: #F2F7FC;
    color: var(--tint-ink);
    border-bottom: 1px solid var(--line);
}
.utilbar__item a { color: var(--tint-ink); }
.utilbar__item a:hover { color: var(--brand); }
.utilbar__item svg { opacity: .55; }
.lang-switch { color: var(--tint-ink); }
.lang-switch:hover { color: var(--brand); }

/* ---------- 2. 临床场景带：左侧留白承字，右侧照片自然显露 ---------- */
.scene-band { color: var(--ink); }
.scene-band::after {
    background: linear-gradient(96deg,
        rgba(255, 255, 255, .98) 0%,
        rgba(255, 255, 255, .96) 34%,
        rgba(255, 255, 255, .80) 56%,
        rgba(250, 253, 255, .42) 76%,
        rgba(248, 252, 255, .26) 100%);
}
.scene-band h2 { color: var(--ink); }
.scene-band p { color: var(--text-mid); }
.scene-band__list li { color: var(--text); }

/* 场景带内原本的「浅色按钮」在白底上会消失，改为品牌实心 */
.scene-band .btn--light {
    background: var(--brand);
    color: #fff;
    box-shadow: var(--sh-md);
}
.scene-band .btn--light:hover {
    background: var(--brand-600);
    box-shadow: var(--sh-lg);
}

/* ---------- 3. 技术优势区块：深色 → 白底浅渐变 + 白卡片 ---------- */
.section--dark {
    background:
        radial-gradient(900px 420px at 88% -10%, rgba(22, 191, 176, .10) 0%, transparent 62%),
        radial-gradient(760px 380px at 2% 100%, rgba(18, 101, 168, .07) 0%, transparent 60%),
        linear-gradient(180deg, #F8FBFE 0%, #E9F2FB 100%);
    color: var(--text-mid);
}
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--ink); }
.section--dark .eyebrow { color: var(--accent-600); }
.section--dark .section-sub { color: var(--text-mid); }

.section--dark .feat-item {
    background: #fff;
    border-color: var(--line);
    box-shadow: var(--sh-sm);
}
.section--dark .feat-item:hover {
    background: #fff;
    border-color: rgba(18, 101, 168, .24);
    box-shadow: var(--sh-md);
}
.section--dark .feat-item__icon {
    background: linear-gradient(140deg, var(--bg-tint), #fff);
    border-color: var(--line);
    color: var(--brand);
}
.section--dark .feat-item:hover .feat-item__icon {
    background: linear-gradient(140deg, var(--brand), var(--brand-700));
    color: #fff;
    border-color: transparent;
}
.section--dark .feat-item__title { color: var(--ink); }
.section--dark .feat-item__desc { color: var(--text-mid); }

/* ---------- 4. CTA 面板：深色渐变块 → 浅色描边卡片 ---------- */
.cta-panel {
    background:
        radial-gradient(600px 300px at 88% 18%, rgba(22, 191, 176, .13) 0%, transparent 62%),
        linear-gradient(128deg, #FFFFFF 0%, #F5FAFE 55%, #EAF4FC 100%);
    border: 1px solid var(--line);
    box-shadow: var(--sh-md);
}
.cta-panel::before,
.cta-panel::after { border-color: rgba(18, 101, 168, .10); }
.cta-panel h2 { color: var(--ink); }
.cta-panel p { color: var(--text-mid); }

.cta-panel .btn--outline-light {
    background: #fff;
    border-color: var(--line);
    color: var(--ink);
    backdrop-filter: none;
}
.cta-panel .btn--outline-light:hover {
    background: rgba(18, 101, 168, .05);
    border-color: var(--brand);
    color: var(--brand);
}

/* ---------- 5. 数据条（关于页「使命」区）：深墨蓝卡片 → 白卡 ---------- */
.stats { background: var(--line); }
.stats__item { background: #fff; }
.stats__num { color: var(--ink); }
.stats__num span { color: var(--brand); }
.stats__label { color: var(--tint-ink); }

/* ---------- 6. 页脚：深藏蓝 → 浅灰蓝 ---------- */
/* 页脚品牌文字颜色以这里为准：style.css 里的基础规则会被下面两个变量覆盖，
   改页脚 logo 文字颜色改这两行即可（不要再去 style.css 改 .brand--footer）。 */
.site-footer {
    background: #F2F7FC;
    color: var(--tint-ink);
    border-top: 1px solid var(--line);

    --footer-brand-name: var(--brand-name);  /* 页脚 respacare 字标，默认跟页头同色 */
    --footer-brand-sub:  var(--tint-mute);   /* 页脚「瑞普康医疗」小字 */
}
.footer-brand__desc { color: var(--tint-ink); }
.footer-brand__tags span {
    color: var(--tint-ink);
    background: #fff;
    border-color: var(--line);
}
.footer-col__title { color: var(--ink); }
.footer-link { color: var(--tint-ink); }
.footer-link:hover { color: var(--brand); }
.footer-contact-line { color: var(--tint-ink); }
.footer-contact-line svg { color: var(--brand); opacity: .9; }
.footer-contact-line a:hover { color: var(--brand); }
.site-footer__bottom { border-top-color: var(--line); }
.site-footer__bottom-inner { color: var(--tint-mute); }
.copyright a { color: var(--tint-ink); }
.copyright a:hover { color: var(--brand); }

/* 页脚 logo：原始标记是「青色半透明块 + 青波形」，那是为深藏蓝页脚设计的，
   换到浅蓝页脚上会糊成一片。这里不再单独写规则 —— style.css 里统一用
   .brand__mark svg rect / path 把两处 logo 都刷成 --logo-mark + --logo-stroke，
   页脚因为选择器更具体曾经盖掉它，专门留这条注释提醒别再写回去。 */

/* ---------- 7. 窄屏：场景带改为整体高白度遮罩，避免文字压在照片上 ---------- */
@media (max-width: 900px) {
    .scene-band::after {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, .96) 0%,
            rgba(255, 255, 255, .94) 62%,
            rgba(255, 255, 255, .88) 100%);
    }
}