/* ============================================================
   MX TOKENS — single source of truth for light/dark theming.
   Every mx page consumes these vars; nothing hardcodes below.
   Toggle: html[data-theme="dark"] (set pre-paint by head script,
   persisted in localStorage "mx-theme", default prefers-color-scheme).
   ============================================================ */

:root {
    color-scheme: light;

    /* surfaces */
    --mx-bg: #ffffff;          /* page background */
    --mx-surface: #ffffff;     /* cards, panels */
    --mx-surface-2: #F6F6F6;   /* alt sections, tiles, fills */
    --mx-surface-3: #EFEFEF;   /* pressed/hover fills */

    /* ink */
    --mx-ink: #0A0A0A;         /* primary text */
    --mx-ink-2: #545454;       /* secondary text */
    --mx-ink-3: #757575;       /* tertiary / placeholders */
    --mx-ink-4: #9E9E9E;       /* faint labels on light */

    /* lines */
    --mx-border: #E2E2E2;
    --mx-border-2: #D9D9D9;

    /* actions (invert in dark: white button, black text) */
    --mx-accent: #0A0A0A;
    --mx-on-accent: #ffffff;
    --mx-accent-hover: #232323;

    /* brand constants (same in both modes) */
    --mx-brand-black: #0A0A0A; /* brand bands (footer, login visual col) — black in BOTH modes */
    --mx-green: #06A95C;
    --mx-red: #E11900;

    /* effects */
    --mx-shadow: 0 10px 28px -12px rgba(10, 10, 10, .14);
    --mx-shadow-lg: 0 34px 68px -24px rgba(10, 10, 10, .45);

    /* scrim for photos */
    --mx-scrim: rgba(6, 7, 9, .88);

    /* map tiles stay light-readable unless the page opts out */
    --mx-map-tile-filter: none;
}

html[data-theme="dark"] {
    color-scheme: dark;

    --mx-bg: #0A0A0A;
    --mx-surface: #161616;
    --mx-surface-2: #1D1D1D;
    --mx-surface-3: #262626;

    --mx-ink: #ffffff;
    --mx-ink-2: #A6A6A6;
    --mx-ink-3: #8A8A8A;
    --mx-ink-4: #6E6E6E;

    --mx-border: #262626;
    --mx-border-2: #333333;

    --mx-accent: #ffffff;
    --mx-on-accent: #0A0A0A;
    --mx-accent-hover: #E3E3E3;

    --mx-shadow: 0 10px 28px -12px rgba(0, 0, 0, .6);
    --mx-shadow-lg: 0 34px 68px -24px rgba(0, 0, 0, .8);

    --mx-map-tile-filter: invert(.92) hue-rotate(180deg) brightness(.92) contrast(.9);
}

/* theme toggle button (header) */
.mx-theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: transparent; border: 1px solid var(--mx-border);
    color: var(--mx-ink); font-size: 17px; cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.mx-theme-toggle:hover { border-color: var(--mx-ink); }
.mx-theme-toggle:focus-visible { outline: 2px solid var(--mx-ink); outline-offset: 3px; }
html[data-theme="dark"] .mx-theme-toggle .ri-moon-line::before { content: "\ef2e"; } /* sun-fill */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}