/* ============================================================
 * user_ui — theme-toggle CSS infrastructure
 * ============================================================
 *
 * Phase 7 Package B. CSS-only support for the dark / light
 * theme switch. The JS that flips `<html data-theme>` lands in
 * Phase 7 Package C as a registry module; this file is the
 * styling half — the rules the JS triggers when it changes the
 * attribute.
 *
 * Most theme variation is already handled at the variable level
 * in tokens.css (one set of values for :root, one for
 * html[data-theme="dark"]). This file handles only the cases
 * where the VALUE isn't enough — assets and icons that have to
 * swap, not just recolor:
 *
 *   .brand .mark-light / .mark-dark
 *     The brand mark ships as two separate SVGs (light bg
 *     variant and dark bg variant — different stroke colors).
 *     Templates render both <img> tags side by side; CSS hides
 *     the one that doesn't match the current theme. This avoids
 *     a JS round-trip and a flicker on theme change.
 *
 *   .sun / .moon
 *     The theme-toggle <button> contains both icons; CSS shows
 *     whichever icon represents the OPPOSITE of the current
 *     theme (clicking the sun goes to light, the moon to dark).
 *     Same pattern as the brand mark.
 *
 * Footer brand mark is forced via !important (one of three
 * places in the file). The mockup uses the dark mark in the
 * footer regardless of body theme because the footer background
 * image is always dark-leaning; light theme additionally swaps
 * to a lighter footer bg, which is where the light-theme
 * override below kicks in. Footer chrome itself ships in
 * Package F; the mark-swap rules are placed here so the entire
 * theme system lives in one file.
 *
 * Brand-mark image filenames the templates will reference:
 *   <img class="brand-mark mark-light" src="{% static 'img/user_ui/brand-mark-light.svg' %}">
 *   <img class="brand-mark mark-dark"  src="{% static 'img/user_ui/brand-mark-dark.svg' %}">
 * ============================================================ */

/* -------- Brand mark swap (header) -------- */
html[data-theme="light"] .brand .mark-dark  { display: none; }
html[data-theme="dark"]  .brand .mark-light { display: none; }

/* -------- Theme-toggle sun/moon icon swap -------- */
.sun,
.moon { display: none; }

html[data-theme="light"] .moon { display: block; }
html[data-theme="dark"]  .sun  { display: block; }

/* -------- Footer brand mark — light theme override --------
 * The footer always uses the dark brand mark by default
 * (footer bg image is dark). On light theme the bg image swaps
 * to a light variant, so the brand mark has to swap too. Marked
 * !important to outrank the header-level rules above when the
 * same `.brand` markup is reused inside <footer>. */
html[data-theme="light"] footer .brand .mark-dark  { display: none  !important; }
html[data-theme="light"] footer .brand .mark-light { display: block !important; }