/* Public-site theme bridge. Status colors, photographs, maps and uploaded art retain their meaning. */
@media screen {
    html[data-site-theme] { color-scheme: light; background: var(--site-canvas); }
    html[data-site-theme="dark"] { color-scheme: dark; }
    html[data-site-theme] [data-site-section] { color: var(--site-ink); color-scheme: light; }
    html[data-site-theme] [data-site-section][data-site-theme="dark"] { color-scheme: dark; }
    html[data-site-theme] body { background: var(--site-canvas) !important; color: var(--site-ink) !important; }
    html[data-site-theme] :focus-visible { outline: 3px solid var(--site-accent); outline-offset: 3px; }
    html[data-site-theme] ::selection { background: var(--site-button); color: #fff; }
    html[data-site-theme] ::-webkit-scrollbar-track { background: var(--site-canvas); }
    html[data-site-theme] ::-webkit-scrollbar-thumb { background: var(--site-accent); }

    /* The existing utility vocabulary is bridged only for neutral surfaces and brand pink. */
    html[data-site-theme] :is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-slate-50, .bg-slate-100, .glass-card, .service-card) {
        background-color: var(--site-surface) !important;
        border-color: var(--site-border);
    }
    html[data-site-theme] :is(.glass-card, .service-card) { background-image: none; }
    html[data-site-theme] :is(.bg-pink-50, .bg-pink-100, .bg-pink-200, .bg-theme-light) { background-color: var(--site-soft) !important; }
    html[data-site-theme] :is(.text-gray-600, .text-gray-700, .text-gray-800, .text-gray-900, .text-slate-600, .text-slate-700, .text-slate-800, .text-slate-900) { color: var(--site-ink) !important; }
    html[data-site-theme] :is(.text-gray-400, .text-gray-500, .text-slate-400, .text-slate-500) { color: var(--site-muted) !important; }
    html[data-site-theme] :is(.text-pink-300, .text-pink-400, .text-pink-500, .text-pink-600, .text-pink-700, .text-pink-800, .text-pink-900, .text-theme, .text-theme-dark) { color: var(--site-accent) !important; }
    html[data-site-theme] :is(.border-pink-100, .border-pink-200, .border-gray-100, .border-gray-200, .border-slate-100, .border-slate-200) { border-color: var(--site-border) !important; }
    html[data-site-theme] :is(.border-pink-300, .border-pink-400, .border-pink-500, .border-pink-600) { border-color: var(--site-accent) !important; }
    html[data-site-theme] :is(.bg-pink-500, .bg-pink-600, .bg-pink-700, .bg-theme, .bg-theme-gradient) {
        background: var(--site-gradient) !important;
        color: var(--site-on-button) !important;
    }
    html[data-site-theme] :is(.hover\:text-pink-500, .hover\:text-pink-600, .hover\:text-theme):hover { color: var(--site-accent) !important; }
    html[data-site-theme] :is(.hover\:bg-pink-50, .hover\:bg-gray-50, .hover\:bg-gray-100):hover { background-color: var(--site-soft) !important; }
    html[data-site-theme] :is(.hover\:bg-pink-500, .hover\:bg-pink-600, .hover\:bg-pink-700, .hover\:bg-theme):hover { background: var(--site-gradient) !important; color: #fff !important; }
    html[data-site-theme] .group:hover :is(.group-hover\:text-pink-500, .group-hover\:text-pink-600) { color: var(--site-accent) !important; }
    html[data-site-theme] :is(.focus\:border-pink-500, .focus\:border-theme):focus { border-color: var(--site-accent) !important; }

    /* Header, navigation, search and language picker use the same palette as the content. */
    html[data-site-theme] .cm-header { background: var(--site-surface); border-color: var(--site-border); box-shadow: 0 8px 32px var(--site-shadow); }
    html[data-site-theme] :is(.cm-mega, .cm-language-menu, .cm-search-modal__dialog) { background: var(--site-raised); border-color: var(--site-border); color: var(--site-ink); }
    html[data-site-theme] :is(.cm-mega__section h3, .cm-nav__link, .cm-language-option, .cm-search-modal__title) { color: var(--site-ink); }
    html[data-site-theme] .cm-mega__sub { color: var(--site-muted) !important; }
    html[data-site-theme] :is(.cm-mega__sub:hover, .cm-brand__text small) { color: var(--site-accent) !important; }
    html[data-site-theme] :is(.cm-nav__link:hover, .cm-nav__link.is-open, .cm-language-option:hover, .cm-language-option.is-active, .cm-language-option.is-current, .cm-search-trigger, .cm-search-modal__field) { background: var(--site-soft); color: var(--site-accent); border-color: var(--site-border); }
    html[data-site-theme] :is(.cm-search-modal input, .cm-egp-tools input) { background: var(--site-surface); color: var(--site-ink); border-color: var(--site-border); }
    html[data-site-theme] :is(.cm-livebar__badge, .cm-citizen, .cm-search-modal__submit, .cm-egp-tools button) { background: var(--site-gradient); color: #fff; }
    /* Keep the utility bar dark like the reference, independent of the brand palette. */
    html[data-site-theme] .cm-livebar { background: #111526; color: #fff; }
    html[data-site-theme] :is(.cm-livebar__clock, .cm-livebar__staff:hover) { color: #fff; }
    /* The language toggle also has cm-nav__link; keep its text/icons legible on the dark utility bar. */
    html[data-site-theme] .cm-livebar .cm-livebar__language { color: #e8ecf5; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
    html[data-site-theme] .cm-livebar .cm-livebar__language:is(:hover, :focus-visible, [aria-expanded="true"]) { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.32); }
    html[data-site-theme] .cm-livebar .cm-livebar__language:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    /* A soft brand-colored glow sits behind the unchanged agency artwork. */
    html[data-site-theme] .cm-brand__logo { position: relative; isolation: isolate; overflow: visible; flex-shrink: 0; background: #fff; box-shadow: none; }
    html[data-site-theme] .cm-brand__logo::before { content: ""; position: absolute; inset: -18px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, var(--site-seed, #f97316) 0%, transparent 70%); opacity: .28; filter: blur(7px); pointer-events: none; }
    html[data-site-theme] .cm-brand__logo img { border-radius: inherit; }

    /* Remove only outer homepage Content dividers; preserve nested card, form and table borders. */
    #homeSection > :is(section:not(.ong-hero), #executiveSection, #home-ebook-section, .gis-wrapper, #stats-satisfaction, #systemsSection, #faqSection) {
        border-top-width: 0 !important;
        border-bottom-width: 0 !important;
    }

    /* Alternating restrained gradients create a rhythm without changing content or layout. */
    html[data-site-theme] body #homeSection > [data-site-tone],
    html[data-site-theme] body #soft-power,
    html[data-site-theme] body #home-ebook-section,
    html[data-site-theme] .cmcity-content-hero {
        background: var(--site-section-gradient) !important;
        border-color: var(--site-border) !important;
        color: var(--site-ink);
    }
    html[data-site-theme] body #homeSection > [data-site-tone="b"] { background: linear-gradient(140deg, var(--site-tone-b), var(--site-canvas) 58%, var(--site-tone-c)) !important; }
    html[data-site-theme] body #homeSection > [data-site-tone="c"] { background: linear-gradient(120deg, var(--site-tone-c), var(--site-canvas) 60%, var(--site-tone-a)) !important; }
    html[data-site-theme] body #soft-power > .absolute.inset-0 { background: none !important; }
    html[data-site-theme] :is(.service-card, .cm-job-card, .cm-product-card, .cm-egp-tablewrap, .city-vote-card, .city-proposal-card) { background: var(--site-surface); color: var(--site-ink); border-color: var(--site-border); box-shadow: 0 12px 38px var(--site-shadow); }
    html[data-site-theme] .service-card:hover { border-color: var(--site-accent); }
    html[data-site-theme] :is(.service-card-title, .cm-job-card h3, .cm-product-card h3, .cm-section-titlebar h2, .cm-egp-heading h2, .city-vote-card h3, .city-vote-heading h2, .city-proposal-card h2, .city-proposal-card h3) { color: var(--site-ink) !important; }
    html[data-site-theme] :is(.cm-job-card p, .cm-egp-heading p, .cm-economy-empty, .cm-product-register p, .cm-job-submit, .city-vote-description, .city-proposal-card p) { color: var(--site-muted); }
    html[data-site-theme] :is(.cm-egp-table th, .cm-egp-more, .cm-job-card__meta span:not(.urgent), .cm-product-register, .cm-economy-register) { background: var(--site-soft); color: var(--site-ink); border-color: var(--site-border); }
    html[data-site-theme] :is(.cm-egp-table td, .cm-egp-table td:nth-child(2), .cm-product-register strong) { color: var(--site-ink); border-color: var(--site-border); }
    html[data-site-theme] .cm-egp-empty { color: var(--site-muted) !important; }
    html[data-site-theme] :is(.cm-section-kicker, .home-ebook-title) { color: var(--site-accent) !important; }
    html[data-site-theme] :is(.city-vote-subtitle, .city-vote-summary, .city-vote-goal, .city-vote-privacy) { color: var(--site-muted); }
    html[data-site-theme] .city-vote-section::after { background: linear-gradient(to left, var(--site-tone-b), transparent); }
    html[data-site-theme] :is(.city-vote-propose, .city-vote-kicker, .city-vote-count-wrap) { background: var(--site-soft); color: var(--site-accent); border-color: var(--site-border); }
    html[data-site-theme] :is(.city-vote-button:not(.is-success), .city-vote-progress-fill) { background: var(--site-gradient); color: #fff; box-shadow: 0 8px 20px var(--site-shadow); }
    html[data-site-theme] :is(.iot-dashboard-title, .iot-card__title) { color: var(--site-ink); }
    html[data-site-theme] :is(.iot-dashboard-description, .iot-connection, .iot-card__caption, .iot-card__updated, .iot-card__unit:not(.iot-card__unit--accent)) { color: var(--site-muted); }
    html[data-site-theme] .iot-card { background: var(--site-surface); border-color: var(--site-border); }
    html[data-site-theme="dark"] .iot-card__corner { opacity: .12; }
    html[data-site-theme] :is(.stats-satisfaction-main-icon, .stats-satisfaction-online, .stats-satisfaction-button) { background: var(--site-soft); color: var(--site-accent); border-color: var(--site-border); }
    html[data-site-theme] :is(.stats-satisfaction-data-icon, .stats-satisfaction-online__label, .stats-satisfaction-online__value, .stats-satisfaction-online__decoration) { color: var(--site-accent); }
    html[data-site-theme] .stats-satisfaction-button:hover { background: var(--site-button); color: #fff; }
    html[data-site-theme] .systems-section-backdrop { background: none; }
    html[data-site-theme] .systems-edge-fade--left { background: linear-gradient(to right, var(--site-canvas), transparent); }
    html[data-site-theme] .systems-edge-fade--right { background: linear-gradient(to left, var(--site-canvas), transparent); }
    html[data-site-theme] body #executiveSection .ong-exec-video { background: var(--site-surface); border-color: var(--site-border); border-top-color: var(--site-accent); }
    html[data-site-theme] body #executiveSection .ong-exec-person { background: var(--site-surface); color: var(--site-ink); border-color: var(--site-border); transition-property: transform, box-shadow, border-color; }
    html[data-site-theme] body #executiveSection .ong-exec-person p { color: var(--site-accent) !important; }
    html[data-site-theme] body #executiveSection .quill-content :is(strong, b, span, a) { color: var(--site-ink) !important; }
    html[data-site-theme] body #executiveSection .ong-exec-person .from-white { --tw-gradient-from: var(--site-surface); }
    html[data-site-theme] body #executiveSection .ong-exec-person > .absolute { background: var(--site-soft); }
    html[data-site-theme] body #executiveSection .animate-blob { background: var(--site-soft) !important; }
    html[data-site-theme] body #executiveSection :is(.ong-exec-video h3, .ong-exec-video__brand) { color: var(--site-ink); }
    html[data-site-theme] body #executiveSection :is(.ong-exec-video__intro, .ong-exec-video__footer) { color: var(--site-muted); border-color: var(--site-border); }
    html[data-site-theme] body #executiveSection :is(.ong-exec-video__eyebrow, .ong-exec-video__footer a) { background: var(--site-soft); color: var(--site-accent); }
    html[data-site-theme] body #soft-power :is(.soft-power-kicker, .soft-power-kicker i, .soft-power-kicker svg) { background: var(--site-soft) !important; color: var(--site-accent) !important; border-color: var(--site-border) !important; }
    html[data-site-theme] body :is(#soft-power .soft-power-map-button, .home-ebook-all-button) { background: var(--site-gradient) !important; color: #fff !important; border-color: var(--site-button) !important; box-shadow: 0 8px 24px var(--site-shadow); }

    /* Explicit section treatments override the legacy alternating background only
       when chosen. auto preserves the original layout and section treatment. */
    html[data-site-theme] body :is(#homeSection > [data-site-section][data-site-surface="plain"], #contact[data-site-surface="plain"]) { background: var(--site-surface) !important; }
    html[data-site-theme] body :is(#homeSection > [data-site-section][data-site-surface="soft"], #contact[data-site-surface="soft"]) { background: var(--site-tone-a) !important; }
    html[data-site-theme] body :is(#homeSection > [data-site-section][data-site-surface="gradient"], #contact[data-site-surface="gradient"]) { background: var(--site-section-gradient) !important; }
    /* These blue/indigo elements are section branding, never sensor/status data. */
    html[data-site-theme] :is(#community, #systemsSection, #home-ebook-section) :is(.text-blue-500, .text-blue-600, .text-indigo-500, .text-indigo-600) { color: var(--site-accent) !important; }
    html[data-site-theme] :is(#community, #systemsSection) :is(.bg-blue-50, .bg-indigo-50) { background-color: var(--site-soft) !important; }
    html[data-site-theme] :is(#community, #systemsSection) :is(.bg-blue-500, .bg-blue-600, .bg-indigo-600) { background: var(--site-gradient) !important; color: #fff !important; }

    /* Photo/hero text is intentionally NOT remapped with generic .text-white rules. */
    /* The dot's ::after draws its colored circle; never paint the rectangular hit area. */
    html[data-site-theme] .ong-hero__badge { background: var(--site-gradient); color: #fff; }
    html[data-site-theme] :is(.ong-hero h2, .ong-hero p) { color: #fff !important; }
    html[data-site-theme] body #contact { background: var(--site-section-gradient) !important; border-top-color: var(--site-accent); color: var(--site-ink); }

    /* Content pages and their navigation retain their routes; only their surfaces change. */
    html[data-site-theme].cmcity-content-page :is(main.bg-white, .header-protection-layer + .bg-white, body > .bg-white.text-gray-800) { background: var(--site-canvas) !important; }
    html[data-site-theme] .cmcity-content-hero__action { background: var(--site-surface); color: var(--site-ink); border-color: var(--site-border); }
    html[data-site-theme] .cmcity-content-hero__action--primary { background: var(--site-gradient); color: #fff; }
    html[data-site-theme] .cmcity-page-tools { background: var(--site-surface); color: var(--site-ink); border-color: var(--site-border); }
    html[data-site-theme] .cmcity-page-tools__label { color: var(--site-muted); }
    html[data-site-theme] .cmcity-page-tools button { background: var(--site-soft); color: var(--site-ink); border-color: var(--site-border); }
    html[data-site-theme] .cmcity-page-tools button:hover { background: var(--site-button); color: #fff; }
    html[data-site-theme] :is(.btn-guide, .btn-track-status) { background: var(--site-gradient); color: #fff; }
    html[data-site-theme] .smart-city-badge { background: var(--site-soft); color: var(--site-accent); }
    html[data-site-theme] .search-box-container .form-control { background: var(--site-surface); color: var(--site-ink); border-color: var(--site-border); }
    /* Legacy e-GP orange is branding here, not a warning/status color. */
    html[data-site-theme][data-site-page="all_egp"] main :is(.text-orange-500, .text-orange-600) { color: var(--site-accent); }
    html[data-site-theme][data-site-page="all_egp"] main .bg-orange-50 { background: var(--site-soft); }
    html[data-site-theme][data-site-page="all_egp"] main button[type="submit"] { background: var(--site-gradient); color: #fff; }
    html[data-site-theme][data-site-page="all_egp"] main .hover\:bg-orange-500:hover { background: var(--site-button); color: #fff; }
    html[data-site-theme][data-site-page="all_news"] main button.bg-yellow-500 { background: var(--site-gradient) !important; color: #fff !important; border-color: var(--site-button); }

    /* Chat branding only: red unread/error indicators and green staff status stay unchanged. */
    html[data-site-theme] :is(.chat-theme-header, .chat-theme-floating, .chat-theme-primary, .chat-theme-send, .chat-bubble-user) { background: var(--site-gradient) !important; color: #fff !important; }
    html[data-site-theme] :is(.chat-theme-icon, .chat-theme-soft-text) { background: var(--site-soft); color: var(--site-accent); }
    html[data-site-theme] :is(#liveChatWidget, .chat-bubble-staff) { background: var(--site-surface); color: var(--site-ink); border-color: var(--site-border); }
    html[data-site-theme] #liveChatWidget :is(input, textarea, select) { background: var(--site-raised) !important; color: var(--site-ink) !important; border-color: var(--site-border) !important; }

    /* Screenshot 7199: these three accents use one solid orange, including
       every hero slide and the open/hover chat state. Other theme colors stay. */
    html body :is(.cm-livebar__badge, .ong-hero__badge, #chatFloatingBtn) {
        background: #c94b00 !important;
        border-color: #c94b00 !important;
        color: #fff !important;
    }
    html body #chatFloatingBtn::before,
    html body #chatFloatingBtn::after { border-color: #c94b00 !important; }
    html body #chatFloatingBtn:hover { box-shadow: 0 0 22px rgba(201, 75, 0, .45); }
    html body #chatFloatingBtn:focus-visible { outline-color: #c94b00; }

    @media (max-width: 1050px) { html[data-site-theme] .cm-nav { background: var(--site-surface); } }
}
@media print {
    html[data-site-theme] { --site-ink: #000 !important; --site-muted: #333 !important; --cmcity-ink: #000 !important; --cmcity-muted: #333 !important; --cmcity-pink: #333 !important; color-scheme: light; }
}