/* Keep your existing topStyles.css above this first-pass layer. */

/* =========================
   FABRIC SHELL / THEME PASS
   ========================= */
:root, html[data-theme="light"] {
    --shell-bg: rgba(255,255,255,.58); --panel-bg: rgba(255,255,255,.76); --panel-solid:#fff;
    --text-main:#171717; --text-muted:rgba(0,0,0,.64); --border-soft:rgba(0,0,0,.10);
    --accent:#447f86; --accent-strong:#245f67; --button-primary-bg:#111; --button-primary-text:#fff;
}
html[data-theme="dark"] {
    --shell-bg:rgba(19,22,25,.76); --panel-bg:rgba(29,33,37,.9); --panel-solid:#202428;
    --text-main:#f5f5f3; --text-muted:rgba(255,255,255,.66); --border-soft:rgba(255,255,255,.12);
    --accent:#9acbd0; --accent-strong:#b6e1e5; --button-primary-bg:#f2f2ef; --button-primary-text:#171717;
}
html[data-theme="classic"] {
    --shell-bg:rgba(236,245,243,.9); --panel-bg:rgba(255,255,255,.92); --panel-solid:#fff;
    --text-main:#34484b; --text-muted:#61777a; --border-soft:rgba(68,139,148,.24);
    --accent:#449ba4; --accent-strong:#1f7384; --button-primary-bg:#549099; --button-primary-text:#fff;
}
body { pointer-events:auto; color:var(--text-main); }
#container, .appModal, .marketingHero, .marketingBenefits, .marketingPlans, .lynxUseCases, .marketingAuth {
    color:var(--text-main);
}
html[data-theme="dark"] #overlay { background:rgba(5,8,11,.52); }
html[data-theme="dark"] #container,
html[data-theme="dark"] .appModal,
html[data-theme="dark"] .marketingHero,
html[data-theme="dark"] .marketingBenefits,
html[data-theme="dark"] .marketingPlans,
html[data-theme="dark"] .lynxUseCases,
html[data-theme="dark"] .marketingAuth { background:var(--panel-bg); border-color:var(--border-soft); }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background:var(--panel-solid); color:var(--text-main); border-color:var(--border-soft); }
html[data-theme="classic"] #overlay { background:rgba(225,238,255,.42); }