/* * Landing-embed appearance. When framed, appearance-bridge.js copies * parent --ds-* onto the embed . These rules are the standalone * fallback remap and light-mode icon/CTA fixes hex alone cannot express. * Floor values mirror src/app/ds-landing-theme.css black/white scales. */ html[data-theme="hard-dark"], html[data-theme="soft-dark"] { color-scheme: dark; } html[data-theme="soft-light"], html[data-theme="hard-light"] { color-scheme: light; } html[data-theme="hard-dark"] { --fs-bg: #010102; --fs-surface: #090a0c; --fs-raised: #171718; --fs-overlay: #171718; --fs-border: rgb(247 248 248 / 0.09); --fs-text: #f7f8f8; --fs-muted: #b9babb; --fs-subtle: #9e9f9f; --fs-accent: #22e07a; } html[data-theme="soft-dark"] { --fs-bg: #0e1014; --fs-surface: #141517; --fs-raised: #171718; --fs-overlay: #171718; --fs-border: rgb(247 248 248 / 0.09); --fs-text: #f7f8f8; --fs-muted: #b9babb; --fs-subtle: #9e9f9f; --fs-accent: #0de88f; } html[data-theme="soft-light"] { --fs-bg: #f7f8f8; --fs-surface: #ffffff; --fs-raised: #f7f8f8; --fs-overlay: #ffffff; --fs-border: rgb(1 1 2 / 0.09); --fs-text: #010102; --fs-muted: #171718; --fs-subtle: #7c7d7d; --fs-accent: #0de88f; } html[data-theme="hard-light"] { --fs-bg: #ffffff; --fs-surface: #f7f8f8; --fs-raised: #ffffff; --fs-overlay: #ffffff; --fs-border: rgb(1 1 2 / 0.09); --fs-text: #010102; --fs-muted: #171718; --fs-subtle: #7c7d7d; --fs-accent: #22e07a; } html[data-theme], html[data-theme] body { background: var(--fs-bg); } /* Drop the baked dark --fs-* on .fs-root so html[data-theme] values inherit. */ html[data-theme] .fs-root { --fs-bg: unset; --fs-surface: unset; --fs-raised: unset; --fs-overlay: unset; --fs-border: unset; --fs-text: unset; --fs-muted: unset; --fs-subtle: unset; --fs-accent: unset; background: var(--fs-bg); color: var(--fs-text); } html[data-theme] .fs-code { background: var(--fs-bg); } html[data-theme] .fs-rm-art { background: transparent; color: var(--fs-text); } html[data-theme] .fs-stat-value { color: var(--fs-text); } html[data-theme] .fs-cta { background: var(--fs-text); color: var(--fs-bg); } /* Soft-dark chrome uses the soft floor; light rails already match floor. */ html[data-theme="soft-dark"] .fs-pg-rail, html[data-theme="soft-dark"] .fs-rm-rail, html[data-theme="soft-dark"] .fs-lb-side, html[data-theme="soft-dark"] .fs-pg-bar, html[data-theme="soft-light"] .fs-pg-rail, html[data-theme="hard-light"] .fs-pg-rail, html[data-theme="soft-light"] .fs-rm-rail, html[data-theme="hard-light"] .fs-rm-rail, html[data-theme="soft-light"] .fs-lb-side, html[data-theme="hard-light"] .fs-lb-side, html[data-theme="soft-light"] .fs-pg-bar, html[data-theme="hard-light"] .fs-pg-bar { background: var(--fs-bg); } html[data-theme="soft-dark"] .fs-rm-art, html[data-theme="soft-light"] .fs-rm-art { --rm-mark: var(--fs-accent); } /* * Diagram cell fills default to a dark green authored for dark floors. * On light floors that fill stays near-black while lettering uses --fs-text * (near-black), so ink disappears. Lift the fill toward the accent on a * light surface so letters stay readable. */ html[data-theme="soft-light"] .fs-rm-art, html[data-theme="hard-light"] .fs-rm-art { --rm-fill: color-mix(in srgb, var(--fs-accent) 32%, var(--fs-surface)); --rm-mark: var(--fs-accent); } /* Contest ranking body uses --fs-bg; on light that reads as a gray well. Lift rows to --fs-surface so they sit lighter than the page floor. */ html[data-theme="soft-light"] .fs-lb-table-wrap, html[data-theme="hard-light"] .fs-lb-table-wrap, html[data-theme="soft-light"] .fs-lb-table tbody tr, html[data-theme="hard-light"] .fs-lb-table tbody tr { background: var(--fs-surface); } html[data-theme="soft-light"] .fs-pb-filters .fs-pb-co-chip img, html[data-theme="hard-light"] .fs-pb-filters .fs-pb-co-chip img, html[data-theme="soft-light"] .fs-pb-co img, html[data-theme="hard-light"] .fs-pb-co img, html[data-theme="soft-light"] .fs-pb-brand img, html[data-theme="hard-light"] .fs-pb-brand img, html[data-theme="soft-light"] .fs-pg-rail-btn img, html[data-theme="hard-light"] .fs-pg-rail-btn img, html[data-theme="soft-light"] .fs-pg-rail-logo img, html[data-theme="hard-light"] .fs-pg-rail-logo img, html[data-theme="soft-light"] .fs-rm-rail-btn img, html[data-theme="hard-light"] .fs-rm-rail-btn img, html[data-theme="soft-light"] .fs-rm-rail-logo img, html[data-theme="hard-light"] .fs-rm-rail-logo img, html[data-theme="soft-light"] .fs-lb-nav-btn img, html[data-theme="hard-light"] .fs-lb-nav-btn img, html[data-theme="soft-light"] .fs-lb-logo img, html[data-theme="hard-light"] .fs-lb-logo img { filter: brightness(0); } html[data-theme="soft-light"] .fs-rm-tag, html[data-theme="hard-light"] .fs-rm-tag, html[data-theme="soft-light"] .fs-rm-tag.is-interview, html[data-theme="hard-light"] .fs-rm-tag.is-interview, html[data-theme="soft-light"] .fs-rm-tag.is-olympiad, html[data-theme="hard-light"] .fs-rm-tag.is-olympiad, html[data-theme="soft-light"] .fs-rm-tag.is-dsa, html[data-theme="hard-light"] .fs-rm-tag.is-dsa { background: var(--fs-text); color: var(--fs-bg); }