/* ============================================================ MAGSTONE PACK — shared UI layer (mag-ui) · WO 100.3 Theme (light/dark) + accessibility + base components. SAFE-GLOBAL BY DESIGN: - CSS vars are namespaced --mag-* (never --navy / --bg) - state classes are namespaced body.mag-dark / .mag-contrast / .mag-links / .mag-kbd - components are prefixed .mag-* and live-page bare selectors (body, .card, .btn, a, table) are NOT redefined here. => loading this file on a live page changes nothing until you opt in by adding mag-* classes. No override, no collision. ============================================================ */ /* ---- theme tokens (LIGHT) ---- */ :root{ --mag-bg:#f3f6fb; --mag-surface:#eef2f8; --mag-card:#ffffff; --mag-text:#112a50; --mag-text-soft:#33456a; --mag-muted:#5a6b85; --mag-line:#d8e1ee; --mag-line-soft:#e7edf5; --mag-navy:#14243f; --mag-navy2:#1c3563; --mag-orange:#ee8320; --mag-orange-strong:#c96f0d; --mag-orange-ink:#7a4305; /* orange dark enough for text on light */ --mag-link:#1d5fb0; --mag-link-hover:#c96f0d; --mag-success:#0f7a52; --mag-success-bg:#e2f6ec; --mag-warning:#8a5a00; --mag-warning-bg:#fff2d6; --mag-danger:#b5342a; --mag-danger-bg:#fdecec; --mag-info:#155e9c; --mag-info-bg:#e4f0fb; --mag-focus:#1f7ae0; --mag-focus-ring:0 0 0 3px rgba(31,122,224,.45); --mag-shadow:0 10px 30px rgba(12,37,78,.10); } /* ---- theme tokens (DARK) — every pair checked for AA contrast ---- */ body.mag-dark{ --mag-bg:#0a1628; --mag-surface:#0e1e36; --mag-card:#13253f; --mag-text:#eaf1fb; --mag-text-soft:#cfdcf0; --mag-muted:#a7b8d2; --mag-line:#26456b; --mag-line-soft:#1e3452; --mag-navy:#0a1628; --mag-navy2:#1c3563; --mag-orange:#ff9d3f; --mag-orange-strong:#ffab5e; --mag-orange-ink:#ffb968; --mag-link:#7db8ef; --mag-link-hover:#ffab5e; --mag-success:#4fd39a; --mag-success-bg:#0f3a2b; --mag-warning:#ffc465; --mag-warning-bg:#3d2f10; --mag-danger:#ff8a80; --mag-danger-bg:#3d1a17; --mag-info:#7db8ef; --mag-info-bg:#12324f; --mag-focus:#5aa3f0; --mag-focus-ring:0 0 0 3px rgba(90,163,240,.5); --mag-shadow:0 12px 34px rgba(0,0,0,.34); } /* ---- high-contrast reinforcement (fills the gap the pack JS left) ---- */ body.mag-contrast{ --mag-text:#000000; --mag-muted:#1c2a44; --mag-line:#5a6b85; --mag-link:#0b3e86; --mag-link-hover:#7a4305; } body.mag-dark.mag-contrast{ --mag-text:#ffffff; --mag-muted:#dbe6f6; --mag-line:#7f96b8; --mag-link:#bcd9ff; --mag-link-hover:#ffcf9a; } /* ---- focus: visible only during keyboard nav (mag-kbd) + always for :focus-visible ---- */ body.mag-kbd :focus, .mag :focus-visible, .mag-focusable:focus-visible{ outline:3px solid var(--mag-focus); outline-offset:2px; box-shadow:var(--mag-focus-ring); border-radius:6px; } /* ---- link emphasis toggle (accessibility) ---- */ body.mag-links a, body.mag-links .mag a{ text-decoration:underline !important; text-underline-offset:2px; font-weight:700; } /* ============================================================ BASE COMPONENTS — all under .mag-* prefix, opt-in only. ============================================================ */ .mag-card{ background:var(--mag-card); border:1px solid var(--mag-line); border-radius:16px; box-shadow:var(--mag-shadow); color:var(--mag-text); } .mag-muted{ color:var(--mag-muted); } .mag-surface{ background:var(--mag-surface); } /* buttons — contrast-safe: primary=navy/white, accent=orange/dark-ink */ .mag-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-weight:800; border-radius:10px; padding:11px 18px; cursor:pointer; border:1px solid var(--mag-line); background:var(--mag-card); color:var(--mag-text); } .mag-btn:hover{ border-color:var(--mag-orange); } .mag-btn-primary{ background:var(--mag-navy2); border-color:var(--mag-navy2); color:#fff; } .mag-btn-primary:hover{ filter:brightness(1.08); } .mag-btn-accent{ background:var(--mag-orange); border-color:var(--mag-orange); color:#20130a; } /* dark ink on orange = AA */ .mag-btn-accent:hover{ filter:brightness(1.05); } .mag-btn:focus-visible{ outline:3px solid var(--mag-focus); outline-offset:2px; } /* form controls */ .mag-input,.mag-select,.mag-textarea{ width:100%; font:inherit; color:var(--mag-text); background:var(--mag-card); border:1.5px solid var(--mag-line); border-radius:10px; padding:11px 13px; } .mag-input::placeholder,.mag-textarea::placeholder{ color:var(--mag-muted); opacity:1; } /* readable placeholders both modes */ .mag-input:focus,.mag-select:focus,.mag-textarea:focus{ outline:none; border-color:var(--mag-orange); box-shadow:var(--mag-focus-ring); } .mag-label{ display:block; font-weight:700; color:var(--mag-text-soft); margin-bottom:6px; } /* tables */ .mag-table{ width:100%; border-collapse:collapse; color:var(--mag-text); } .mag-table th{ text-align:right; font-weight:700; color:var(--mag-muted); background:var(--mag-surface); padding:12px 14px; } .mag-table td{ padding:12px 14px; border-top:1px solid var(--mag-line); } /* badges / statuses — readable in both themes */ .mag-badge{ display:inline-block; border-radius:999px; padding:4px 11px; font-size:12.5px; font-weight:800; } .mag-badge-success{ background:var(--mag-success-bg); color:var(--mag-success); } .mag-badge-warning{ background:var(--mag-warning-bg); color:var(--mag-warning); } .mag-badge-danger{ background:var(--mag-danger-bg); color:var(--mag-danger); } .mag-badge-info{ background:var(--mag-info-bg); color:var(--mag-info); } /* links (opt-in, prefixed) */ .mag a,a.mag-link{ color:var(--mag-link); } .mag a:hover,a.mag-link:hover{ color:var(--mag-link-hover); } /* shell scaffolding placeholders — real topbar/sidebar/footer land in 100.4/5/6 */ .mag-shell{ color:var(--mag-text); background:var(--mag-bg); } /* ============================================================ WO 100.11–100.34 — generic page-content helpers (dark + AA) The .dc.html pages are rendered by the x-dc runtime, which re-writes every inline style through the CSSOM: `background:#fff` comes back as `background: rgb(255, 255, 255)`. Both spellings are listed so one block covers runtime-rendered pages and plain-HTML pages alike. Opt out per element with class="mag-keep" (logo tiles, brand swatches). Shell (topbar/sidebar) is navy in both themes and is built with rgba()/gradients, so none of these selectors reach it. ============================================================ */ /* ---- AA in LIGHT mode: muted greys that fail 4.5:1 on white ---- */ [style*="color:#8090a8"]:not(.mag-keep),[style*="color: rgb(128, 144, 168)"]:not(.mag-keep), [style*="color:#93a0b5"]:not(.mag-keep),[style*="color: rgb(147, 160, 181)"]:not(.mag-keep), [style*="color:#a4b0c4"]:not(.mag-keep),[style*="color: rgb(164, 176, 196)"]:not(.mag-keep), [style*="color:#a9b6cc"]:not(.mag-keep),[style*="color: rgb(169, 182, 204)"]:not(.mag-keep), [style*="color:#9aa7bd"]:not(.mag-keep),[style*="color: rgb(154, 167, 189)"]:not(.mag-keep){color:#5a6b85!important} /* NB: #7f8ea8 / #7a8ba6 are deliberately NOT in that list — they are the footer greys, and the footer is navy in both themes (5.1:1 as authored). Normalising them darker breaks the one place they are used. */ /* ---- orange as TEXT fails on white (2.7:1). Darken in light, lighten in dark. Orange as a FILL is handled above (dark ink on top). The shell's orange wordmark sits on navy and opts out with .mag-keep. ---- */ [style*="color:#ee8320"]:not(.mag-keep),[style*="color: rgb(238, 131, 32)"]:not(.mag-keep){color:#7a4305!important} body.mag-dark [style*="color:#ee8320"]:not(.mag-keep), body.mag-dark [style*="color: rgb(238, 131, 32)"]:not(.mag-keep){color:#ff9d3f!important} /* ---- ...but NOT when that muted grey sits on a navy panel. There it already reads at 4.3:1, and darkening it to #5a6b85 drops it to 2.9:1. Restores the light muted inside every surface that is navy in both themes. Must come after the normalisation above. ---- */ [style*="background:#14243f"] [style*="color:#8090a8"],[style*="background: rgb(20, 36, 63)"] [style*="color: rgb(128, 144, 168)"], [style*="background:#101d33"] [style*="color:#8090a8"],[style*="background: rgb(16, 29, 51)"] [style*="color: rgb(128, 144, 168)"], [style*="background:#0d1f3c"] [style*="color:#8090a8"],[style*="background: rgb(13, 31, 60)"] [style*="color: rgb(128, 144, 168)"], [style*="background:#0a1628"] [style*="color:#8090a8"],[style*="background: rgb(10, 22, 40)"] [style*="color: rgb(128, 144, 168)"], [style*="background:#14243f"] [style*="color:#93a0b5"],[style*="background: rgb(20, 36, 63)"] [style*="color: rgb(147, 160, 181)"], [style*="background:#101d33"] [style*="color:#93a0b5"],[style*="background: rgb(16, 29, 51)"] [style*="color: rgb(147, 160, 181)"], [style*="background:#14243f"] [style*="color:#a4b0c4"],[style*="background: rgb(20, 36, 63)"] [style*="color: rgb(164, 176, 196)"], [style*="background:#101d33"] [style*="color:#a4b0c4"],[style*="background: rgb(16, 29, 51)"] [style*="color: rgb(164, 176, 196)"], [style*="background:#14243f"] [style*="color:#a9b6cc"],[style*="background: rgb(20, 36, 63)"] [style*="color: rgb(169, 182, 204)"], [style*="background:#101d33"] [style*="color:#a9b6cc"],[style*="background: rgb(16, 29, 51)"] [style*="color: rgb(169, 182, 204)"]{color:#a7b8d2!important} /* ---- same story for the orange: darkening it to #7a4305 is right on white (7.98:1) but wrong on a navy panel (1.94:1), where the authored orange already reads at 5.8:1. Restore a light orange there, both themes. Equal specificity to the rule above — wins on source order. ---- */ [style*="background:#14243f"] [style*="color:#ee8320"],[style*="background: rgb(20, 36, 63)"] [style*="color: rgb(238, 131, 32)"], [style*="background:#101d33"] [style*="color:#ee8320"],[style*="background: rgb(16, 29, 51)"] [style*="color: rgb(238, 131, 32)"], [style*="background:#0d1f3c"] [style*="color:#ee8320"],[style*="background: rgb(13, 31, 60)"] [style*="color: rgb(238, 131, 32)"], [style*="background:#0a1628"] [style*="color:#ee8320"],[style*="background: rgb(10, 22, 40)"] [style*="color: rgb(238, 131, 32)"], [style*="background:#101d33"] [style*="color:#1f8a5b"],[style*="background: rgb(16, 29, 51)"] [style*="color: rgb(31, 138, 91)"], [style*="background:#14243f"] [style*="color:#1f8a5b"],[style*="background: rgb(20, 36, 63)"] [style*="color: rgb(31, 138, 91)"]{color:#ff9d3f!important} [style*="background:#101d33"] [style*="color:#1f8a5b"],[style*="background: rgb(16, 29, 51)"] [style*="color: rgb(31, 138, 91)"], [style*="background:#14243f"] [style*="color:#1f8a5b"],[style*="background: rgb(20, 36, 63)"] [style*="color: rgb(31, 138, 91)"]{color:#4fd39a!important} /* ---- "not yet reached" step labels in progress steppers are 1.7:1 on white. Keep them clearly de-emphasised against the navy active label, but readable. Dark mode already has ample contrast there, so light only. ---- */ body:not(.mag-dark) [style*="color:#c0cad9"]:not(.mag-keep), body:not(.mag-dark) [style*="color: rgb(192, 202, 217)"]:not(.mag-keep), body:not(.mag-dark) [style*="color:#c9d2e0"]:not(.mag-keep), body:not(.mag-dark) [style*="color: rgb(201, 210, 224)"]:not(.mag-keep){color:#5f6e88!important} /* NB: #c2cddf is deliberately absent — it is the sidebar link colour on navy, where it reads at 8:1. Darkening it would blind the whole shell. */ /* ---- status text: the authored greens/ambers miss 4.5:1 both on white and on their own pale tint (3.1-4.3:1). Swap for the mag-ui status inks. The dark-mode rules below outrank these, so dark is unaffected. ---- */ [style*="color:#1f8a5b"]:not(.mag-keep),[style*="color: rgb(31, 138, 91)"]:not(.mag-keep){color:#0f7a52!important} [style*="color:#d97a1a"]:not(.mag-keep),[style*="color: rgb(217, 122, 26)"]:not(.mag-keep){color:#8a5a00!important} /* ---- text inside a surface that is navy in BOTH themes (footers, navy panels) must stay light in both — the theme rules never reach it. ---- */ [style*="background:#101d33"] [style*="color:#285ba0"],[style*="background: rgb(16, 29, 51)"] [style*="color: rgb(40, 91, 160)"], [style*="background:#14243f"] [style*="color:#285ba0"],[style*="background: rgb(20, 36, 63)"] [style*="color: rgb(40, 91, 160)"], [style*="background:#0d1f3c"] [style*="color:#285ba0"],[style*="background: rgb(13, 31, 60)"] [style*="color: rgb(40, 91, 160)"]{color:#7db8ef!important} /* Links in those navy surfaces inherit the page's own `a{color:#285ba0}` stylesheet rule (2.5:1 on navy) — no inline style to match, so target the link itself. Scoped to the navy container, never a global `a` override. */ [style*="background:#101d33"] a:not(.mag-keep),[style*="background: rgb(16, 29, 51)"] a:not(.mag-keep), [style*="background:#14243f"] a:not(.mag-keep),[style*="background: rgb(20, 36, 63)"] a:not(.mag-keep), [style*="background:#0d1f3c"] a:not(.mag-keep),[style*="background: rgb(13, 31, 60)"] a:not(.mag-keep){color:#a7c7ea} [style*="background:#101d33"] a:not(.mag-keep):hover,[style*="background: rgb(16, 29, 51)"] a:not(.mag-keep):hover, [style*="background:#14243f"] a:not(.mag-keep):hover,[style*="background: rgb(20, 36, 63)"] a:not(.mag-keep):hover, [style*="background:#0d1f3c"] a:not(.mag-keep):hover,[style*="background: rgb(13, 31, 60)"] a:not(.mag-keep):hover{color:#ffab5e} /* ---- AA in both modes: white on orange/amber is 2.2–2.7:1 -> dark ink ---- */ [style*="background:#ee8320"]:not(.mag-keep),[style*="background: rgb(238, 131, 32)"]:not(.mag-keep), [style*="background:#e0a01e"]:not(.mag-keep),[style*="background: rgb(224, 160, 30)"]:not(.mag-keep), [style*="background:#fbbf24"]:not(.mag-keep),[style*="background: rgb(251, 191, 36)"]:not(.mag-keep), [style*="background:#4ade80"]:not(.mag-keep),[style*="background: rgb(74, 222, 128)"]:not(.mag-keep){color:#20130a!important} /* ---- AA in both modes: icon-tile fills a shade too light for white text (4.0-4.3:1 -> 4.6-6.1:1). Brand navy/orange are untouched. ---- */ [style*="background:#1f8a5b"]:not(.mag-keep),[style*="background: rgb(31, 138, 91)"]:not(.mag-keep){background-color:#1a7049!important} [style*="background:#2b8a9e"]:not(.mag-keep),[style*="background: rgb(43, 138, 158)"]:not(.mag-keep){background-color:#24707f!important} [style*="background:#c47a1a"]:not(.mag-keep),[style*="background: rgb(196, 122, 26)"]:not(.mag-keep){background-color:#a8650f!important} /* ============================================================ DARK MODE — page content ============================================================ */ body.mag-dark{background:var(--mag-bg);color:var(--mag-text)} /* -- card surfaces (white) -- */ body.mag-dark [style*="background:#fff"]:not(.mag-keep), body.mag-dark [style*="background: #fff"]:not(.mag-keep), body.mag-dark [style*="background:#ffffff"]:not(.mag-keep), body.mag-dark [style*="background: rgb(255, 255, 255)"]:not(.mag-keep){background-color:#13253f!important} /* translucent white sticky headers (rgba(255,255,255,.9x) + backdrop blur) */ body.mag-dark [style*="background:rgba(255,255,255"]:not(.mag-keep), body.mag-dark [style*="background: rgba(255, 255, 255"]:not(.mag-keep){background-color:rgba(19,37,63,.92)!important} /* The Magstone logo mark is a white tile holding two clip-path halves, one of them navy — darkening the tile swallows that half. Restore it. Kept as its own rule on purpose: if :has() is unsupported the rule is dropped and the tile merely stays dark, instead of taking the card override down with it. */ body.mag-dark :has(> [style*="clip-path"]){background-color:#fff!important} /* -- page / panel surfaces (light greys) -- */ body.mag-dark [style*="background:#f7f9fc"]:not(.mag-keep), body.mag-dark [style*="background: rgb(247, 249, 252)"]:not(.mag-keep), body.mag-dark [style*="background:#eef1f6"]:not(.mag-keep), body.mag-dark [style*="background: rgb(238, 241, 246)"]:not(.mag-keep), body.mag-dark [style*="background:#eef2f8"]:not(.mag-keep), body.mag-dark [style*="background: rgb(238, 242, 248)"]:not(.mag-keep), body.mag-dark [style*="background:#f4f6f9"]:not(.mag-keep), body.mag-dark [style*="background: rgb(244, 246, 249)"]:not(.mag-keep), body.mag-dark [style*="background:#f0f3f8"]:not(.mag-keep), body.mag-dark [style*="background: rgb(240, 243, 248)"]:not(.mag-keep), body.mag-dark [style*="background:#f8fafc"]:not(.mag-keep), body.mag-dark [style*="background: rgb(248, 250, 252)"]:not(.mag-keep), body.mag-dark [style*="background:#eff2f7"]:not(.mag-keep), body.mag-dark [style*="background: rgb(239, 242, 247)"]:not(.mag-keep){background-color:#0e1e36!important} /* -- status tints -- */ body.mag-dark [style*="background:#e4f5ec"]:not(.mag-keep), body.mag-dark [style*="background: rgb(228, 245, 236)"]:not(.mag-keep), body.mag-dark [style*="background:#e6f7ef"]:not(.mag-keep), body.mag-dark [style*="background: rgb(230, 247, 239)"]:not(.mag-keep){background-color:#0f3a2b!important} body.mag-dark [style*="background:#fdecea"]:not(.mag-keep), body.mag-dark [style*="background: rgb(253, 236, 234)"]:not(.mag-keep), body.mag-dark [style*="background:#fdeceb"]:not(.mag-keep), body.mag-dark [style*="background: rgb(253, 236, 235)"]:not(.mag-keep), body.mag-dark [style*="background:#fdecec"]:not(.mag-keep), body.mag-dark [style*="background: rgb(253, 236, 236)"]:not(.mag-keep){background-color:#3d1a17!important} body.mag-dark [style*="background:#fdeee0"]:not(.mag-keep), body.mag-dark [style*="background: rgb(253, 238, 224)"]:not(.mag-keep), body.mag-dark [style*="background:#fff5ec"]:not(.mag-keep), body.mag-dark [style*="background: rgb(255, 245, 236)"]:not(.mag-keep), body.mag-dark [style*="background:#fffaf5"]:not(.mag-keep), body.mag-dark [style*="background: rgb(255, 250, 245)"]:not(.mag-keep), body.mag-dark [style*="background:#fffdf8"]:not(.mag-keep), body.mag-dark [style*="background: rgb(255, 253, 248)"]:not(.mag-keep){background-color:#3d2f10!important} body.mag-dark [style*="background:#e7effb"]:not(.mag-keep), body.mag-dark [style*="background: rgb(231, 239, 251)"]:not(.mag-keep), body.mag-dark [style*="background:#e4f0fb"]:not(.mag-keep), body.mag-dark [style*="background: rgb(228, 240, 251)"]:not(.mag-keep){background-color:#12324f!important} /* -- hairline borders -- */ body.mag-dark [style*="#e2e7f0"]:not(.mag-keep), body.mag-dark [style*="rgb(226, 231, 240)"]:not(.mag-keep), body.mag-dark [style*="#e7edf5"]:not(.mag-keep), body.mag-dark [style*="rgb(231, 237, 245)"]:not(.mag-keep), body.mag-dark [style*="#c9d2e0"]:not(.mag-keep), body.mag-dark [style*="rgb(201, 210, 224)"]:not(.mag-keep), body.mag-dark [style*="#dfe6f0"]:not(.mag-keep), body.mag-dark [style*="rgb(223, 230, 240)"]:not(.mag-keep), body.mag-dark [style*="#e6ebf3"]:not(.mag-keep), body.mag-dark [style*="rgb(230, 235, 243)"]:not(.mag-keep), body.mag-dark [style*="#dde4ee"]:not(.mag-keep), body.mag-dark [style*="rgb(221, 228, 238)"]:not(.mag-keep){border-color:#26456b!important} /* -- headline / body text -- */ body.mag-dark [style*="color:#14243f"]:not(.mag-keep), body.mag-dark [style*="color: rgb(20, 36, 63)"]:not(.mag-keep), body.mag-dark [style*="color:#16233c"]:not(.mag-keep), body.mag-dark [style*="color: rgb(22, 35, 60)"]:not(.mag-keep), body.mag-dark [style*="color:#12233c"]:not(.mag-keep), body.mag-dark [style*="color: rgb(18, 35, 60)"]:not(.mag-keep), body.mag-dark [style*="color:#22314e"]:not(.mag-keep), body.mag-dark [style*="color: rgb(34, 49, 78)"]:not(.mag-keep), body.mag-dark [style*="color:#2c3a52"]:not(.mag-keep), body.mag-dark [style*="color: rgb(44, 58, 82)"]:not(.mag-keep), body.mag-dark [style*="color:#1c3563"]:not(.mag-keep), body.mag-dark [style*="color: rgb(28, 53, 99)"]:not(.mag-keep), body.mag-dark [style*="color:#3c4a63"]:not(.mag-keep), body.mag-dark [style*="color: rgb(60, 74, 99)"]:not(.mag-keep){color:#eaf1fb!important} /* -- secondary / muted text -- */ body.mag-dark [style*="color:#8090a8"]:not(.mag-keep), body.mag-dark [style*="color: rgb(128, 144, 168)"]:not(.mag-keep), body.mag-dark [style*="color:#5c6b82"]:not(.mag-keep), body.mag-dark [style*="color: rgb(92, 107, 130)"]:not(.mag-keep), body.mag-dark [style*="color:#93a0b5"]:not(.mag-keep), body.mag-dark [style*="color: rgb(147, 160, 181)"]:not(.mag-keep), body.mag-dark [style*="color:#7f8ea8"]:not(.mag-keep), body.mag-dark [style*="color: rgb(127, 142, 168)"]:not(.mag-keep), body.mag-dark [style*="color:#7a8ba6"]:not(.mag-keep), body.mag-dark [style*="color: rgb(122, 139, 166)"]:not(.mag-keep), body.mag-dark [style*="color:#a4b0c4"]:not(.mag-keep), body.mag-dark [style*="color: rgb(164, 176, 196)"]:not(.mag-keep), body.mag-dark [style*="color:#a9b6cc"]:not(.mag-keep), body.mag-dark [style*="color: rgb(169, 182, 204)"]:not(.mag-keep), body.mag-dark [style*="color:#6d7e98"]:not(.mag-keep), body.mag-dark [style*="color: rgb(109, 126, 152)"]:not(.mag-keep), body.mag-dark [style*="color:#718096"]:not(.mag-keep), body.mag-dark [style*="color: rgb(113, 128, 150)"]:not(.mag-keep){color:#a7b8d2!important} /* -- accent text that goes too dark on a dark card -- */ body.mag-dark [style*="color:#285ba0"]:not(.mag-keep), body.mag-dark [style*="color: rgb(40, 91, 160)"]:not(.mag-keep), body.mag-dark [style*="color:#1d64b0"]:not(.mag-keep), body.mag-dark [style*="color: rgb(29, 100, 176)"]:not(.mag-keep){color:#7db8ef!important} body.mag-dark [style*="color:#1f8a5b"]:not(.mag-keep), body.mag-dark [style*="color: rgb(31, 138, 91)"]:not(.mag-keep), body.mag-dark [style*="color:#1c6b37"]:not(.mag-keep), body.mag-dark [style*="color: rgb(28, 107, 55)"]:not(.mag-keep){color:#4fd39a!important} body.mag-dark [style*="color:#c0392b"]:not(.mag-keep), body.mag-dark [style*="color: rgb(192, 57, 43)"]:not(.mag-keep), body.mag-dark [style*="color:#d51f2a"]:not(.mag-keep), body.mag-dark [style*="color: rgb(213, 31, 42)"]:not(.mag-keep), body.mag-dark [style*="color:#e4032e"]:not(.mag-keep), body.mag-dark [style*="color: rgb(228, 3, 46)"]:not(.mag-keep){color:#ff8a80!important} body.mag-dark [style*="color:#d97a1a"]:not(.mag-keep), body.mag-dark [style*="color: rgb(217, 122, 26)"]:not(.mag-keep), body.mag-dark [style*="color:#c47a1a"]:not(.mag-keep), body.mag-dark [style*="color: rgb(196, 122, 26)"]:not(.mag-keep){color:#ffb968!important} body.mag-dark [style*="color:#6b46c1"]:not(.mag-keep), body.mag-dark [style*="color: rgb(107, 70, 193)"]:not(.mag-keep){color:#c4b5fd!important} body.mag-dark [style*="color:#2b8a9e"]:not(.mag-keep), body.mag-dark [style*="color: rgb(43, 138, 158)"]:not(.mag-keep){color:#6fd3e6!important} /* -- bare-element styling from a page's own