/* =========================================================
   THEME SWITCH
   dark  = futuristic theme (header-dark.css + site-futuristic.css)
   light = the original white/red site: those stylesheets are switched off
           (media="not all") by the head script and theme-toggle.js.
   This file only styles the toggle button and the switch animation.
========================================================= */

.theme-toggle {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    margin-right: 12px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    cursor: pointer;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
}
.theme-toggle:hover {
    transform: rotate(-12deg);
    border-color: #4089dd;
    box-shadow: 0 0 0 1px rgba(64, 137, 221, .4), 0 0 18px rgba(244, 140, 24, .35);
}
.theme-toggle:focus-visible { outline: 2px solid #4089dd; outline-offset: 3px; }
.theme-toggle svg {
    position: absolute;
    width: 19px;
    height: 19px;
    transition: opacity .45s cubic-bezier(.16, 1, .3, 1), transform .45s cubic-bezier(.16, 1, .3, 1);
}
.theme-toggle .tt-sun { opacity: 0; transform: scale(.4) rotate(-90deg); }
.theme-toggle .tt-moon { opacity: 1; transform: scale(1) rotate(0); }
[data-theme="light"] .theme-toggle .tt-sun { opacity: 1; transform: scale(1) rotate(0); }
[data-theme="light"] .theme-toggle .tt-moon { opacity: 0; transform: scale(.4) rotate(90deg); }

/* light mode (original site, same black header): red sun to match the brand red */
[data-theme="light"] .theme-toggle { color: #e91d2b; }
[data-theme="light"] .theme-toggle:hover {
    border-color: #e91d2b;
    box-shadow: 0 0 0 3px rgba(233, 29, 43, .2);
}
[data-theme="light"] .theme-toggle:focus-visible { outline-color: #e91d2b; }

/* app page has no header: floating button */
.theme-toggle--floating {
    position: fixed;
    top: 46px;
    right: 18px;
    z-index: 10002;
    margin: 0;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

@media (max-width: 960px) {
    .theme-toggle { width: 38px; height: 38px; flex-basis: 38px; margin-right: 8px; }
}

/* theme switch: simple 0.3s cross-fade between the two colour schemes */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .3s; animation-timing-function: ease; }

/* freeze element transitions during the fade so it goes straight to the final colours */
.theme-anim *,
.theme-anim *::before,
.theme-anim *::after { transition-duration: 0s !important; }

/* light theme font: Geist, same as the dark theme (dark-spark.css) - everywhere except
   the home hero, the logos, the loader, the i3MS tiles and the Themify icons */
html[data-theme="light"] body,
html[data-theme="light"] body *:not(.hero-section, .hero-section *, .dm-preloader *, [class*="logo"], [class*="logo"] *, .dm-i3ms-layout, .dm-i3ms-layout *, [class^="ti-"], [class*=" ti-"]) {
    font-family: Geist, Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

/* =========================================================
   Light theme text: same sizes, weights, spacing and case as the dark theme
   (copied from dark-spark.css - only the type, the light colours stay)
========================================================= */

/* section headings: 28px / 500, normal case */
html[data-theme="light"] :is(.achievements-head, .dm-services-heading, .products-heading, .ssi-section-heading, .ssi-contact-inner, .dbs-services-intro) h2,
html[data-theme="light"] #dm-projects-title,
html[data-theme="light"] .dm-cta .dm-cta-text h2 {
    font-size: clamp(21px, 2.4vw, 28px) !important;
    font-weight: 500 !important;
    line-height: 1.38 !important;
    letter-spacing: -.02em !important;
    text-transform: none !important;
    text-wrap: balance;
}
html[data-theme="light"] h2 .ds-accent { font-weight: 600 !important; }

/* small labels above headings: 16px / 500, sentence case */
html[data-theme="light"] :is(.dm-services-label, .section-label, .ssi-kicker, .ssi-eyebrow, .contact-eyebrow, .app-card .badge) {
    display: inline-block;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: -.01em !important;
    text-transform: lowercase !important;
}
html[data-theme="light"] :is(.dm-services-label, .section-label, .ssi-kicker, .ssi-eyebrow, .contact-eyebrow, .app-card .badge)::first-letter { text-transform: uppercase; }

/* descriptions under headings: 15px / 24px */
html[data-theme="light"] :is(.achievements-head, .products-heading, .ssi-section-heading, .dbs-services-intro, .products-intro) > p {
    font-size: 15px !important;
    line-height: 24px !important;
    letter-spacing: normal !important;
}

/* card text: 16.5px / 600 titles, 13.5px text, 13px list items */
html[data-theme="light"] :is(.dm-service-card, .ssi-service-card, .ssi-product-card, .products-grid .product-card, .dbs-features > div) :is(h3, h2) {
    font-size: 16.5px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    letter-spacing: -.02em !important;
    text-transform: none !important;
}
html[data-theme="light"] :is(.dm-service-card, .ssi-service-card, .ssi-product-card, .products-grid .product-card, .dbs-features > div) p {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
}
html[data-theme="light"] :is(.dm-service-card, .ssi-service-card, .ssi-product-card, .products-grid .product-card, .dbs-features > div) li {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* page titles on the inner pages (not the home hero) */
html[data-theme="light"] :is(.products-intro h1, #ssi-title, #dbs-title, .app-card h1, #contact-title) {
    font-weight: 600 !important;
    letter-spacing: -.03em !important;
    text-transform: none !important;
    line-height: 1.12 !important;
}
html[data-theme="light"] .products-intro h1 { font-size: clamp(30px, 3.4vw, 44px) !important; }
html[data-theme="light"] .products-intro h1 :is(.heading-line, .subheading-line) { text-transform: none !important; }