/* ================================================================================================
   QSYNC - DARK THEME   (preview, 2026-08-31)

   An OVERRIDE LAYER on app.css, not a fork of it. A second full stylesheet would be a copy of every
   layout rule the site has and the two would drift the first time anyone touched a margin.

   The palette is not invented: the site already ships dark bands - the hero and the Social section are
   #0b0d17 - so this promotes the existing dark surface to the whole page and keeps the brand indigo
   and teal.

   ⭐It is SHORT because app.css now expresses its text greys as tokens. Before that it needed
   twenty-one selector overrides and would have missed the twenty-second rule added next month.
   ================================================================================================ */

:root {
    /* Near-black, not pure #000: true black makes text edges buzz on OLED and leaves no way to show
       elevation. #06070d reads as black and still lets a card sit above it. */
    --qs-page:       #06070d;
    --qs-card:       #10131f;
    --qs-card-2:     #161a2a;

    /* The greys INVERT. Each one keeps its job - strongest body copy, secondary, muted, quietest -
       so every rule that used them stays correct without being touched. */
    --qs-ink:        #e9ebf0;
    --qs-ink-strong: #f4f6fa;
    --qs-ink-2:      #ccd1dc;
    --qs-ink-3:      #b3b9c6;
    --qs-muted:      #949bab;
    --qs-muted-2:    #7d8494;

    --qs-line:       #232838;
    --qs-brand:      #6d7cff;   /* lifted from #5b6cff, which is under-contrast on black */
    --qs-brand-2:    #2dd4bf;

    /* app.css documents the tier hues as "text colours on white, so the DARKER end of each hue".
       On black that reverses: same hues, lighter end. */
    --qs-tier-basic: #4ade80;
    --qs-tier-pro:   #fb923c;
    --qs-tier-plus:  var(--qs-brand);
    --qs-tier-qsm:   #a78bfa;
}

/* ⭐color-scheme tells the BROWSER, not just the page. Without it the scrollbars, the default form
   controls, the autofill highlight and the text-selection colour all stay in their light forms and sit
   on the page like chips of the old theme. It is one line and it is the difference between a dark page
   and a dark site. */
html { color-scheme: dark; }
html, body { background: var(--qs-page); color: var(--qs-ink); }

/* nav */
.site-nav { background: #06070de6; }
.nav-links a:hover { color: var(--qs-brand); }
.nav-brand { color: var(--qs-ink-strong); }
@media (max-width: 900px) {
    /* the open menu is a panel ABOVE the page, so it must not merge into it */
    .nav-links { background: var(--qs-card-2); }
}

/* bands that were already dark - reseated on the new page colour so the seams disappear */
.hero      { background: radial-gradient(1200px 500px at 70% -10%, #6d7cff26, transparent),
                         linear-gradient(180deg, #0a0c16, #06070d); }
.social    { background: radial-gradient(1400px 460px at 18% -30%, #2dd4bf24, transparent),
                         linear-gradient(180deg, #08101a, #06070d); }
.shot-band { background: linear-gradient(180deg, #0a0c16, #06070d); }
.detail-hero { background: linear-gradient(180deg, #0a0c16, #06070d) !important; }

/* surfaces */
/* ⛔A THEME RULE FOR A SELECTOR THAT DOES NOT EXIST IS A SILENT NO-OP, and it reads exactly like
   a rule that worked. The first draft of this line said `.faq-item`, a class this site has never had -
   so every FAQ question stayed a WHITE pill with white text on it, and nothing errored. Caught by
   scanning all twenty routes for near-white pixels, not by reading the stylesheet: FAQ came back 28%
   white when every other page was under 3%.
   ⭐ThemeSelectorsExistTests now fails the build if a selector here is absent from app.css. */
.product-card, .partner-card, .dev-card, .tier, .news-card, .faq { background: var(--qs-card); }
.shot-btn img, .lightbox img { background: var(--qs-card-2); }
.partner-band { background: linear-gradient(180deg, #131829, var(--qs-card));
                box-shadow: 0 10px 30px #00000059; }
.site-footer  { background: #04050a; }
.badge, .dev-chip { background: var(--qs-card-2); border-color: var(--qs-line); }
.badge-addon { background: color-mix(in srgb, var(--accent, var(--qs-brand)) 22%, var(--qs-card)); }

/* ⛔.pain and .partner-quote sit on --qs-bg-soft, a TRANSLUCENT overlay. Panel and text darkened
   together, so the pair stayed "consistent" while becoming unreadable - a contrast failure that looks
   fine to a rule-by-rule reading and is obvious the moment you look at the page. */
.pain, .partner-quote { background: var(--qs-card-2); }

/* ⛔A PARTNER'S LOGO IS THEIR ASSET AND IT WAS DRAWN FOR WHITE. Involve Audio's mark is dark grey
   on transparency, so on a black card it all but disappears - and we cannot recolour someone else's
   trademark. Give it a light PLATE instead: the logo renders exactly as its owner intended, sitting on
   the background it was designed for.
   ⭐Same treatment for their product photograph, which already carries a white background - the plate
   turns a bright rectangle that looks like a mistake into a deliberate frame. */
.partner-logo { background: #fff; border-radius: 10px; padding: 8px 12px; box-sizing: content-box; }
/* ⚠The product photograph has NO class of its own, so it is reached through the card. Named
   `.partner-shot` on the first attempt - a class that does not exist - and
   ThemeWiringTests.Every_class_the_theme_targets_exists_in_the_base_stylesheet failed the build one
   commit after it was written to catch exactly this. */
.partner-card img:not(.partner-logo) { border-radius: 12px; border: 1px solid var(--qs-line); }

/* the bootstrap default link blue is unreadable on black */
a, .btn-link { color: var(--qs-brand); }

/* ⛔A CAPTION IS NOT A LINK. Shot captions inherit from the body-link colour once it is lifted to the
   brand indigo, which turned every caption on the App UI page blue - a regression this theme
   introduced, caught by looking rather than by reasoning about specificity. */
.shot figcaption, .shot-video figcaption { color: var(--qs-muted); }

.btn-ghost { border-color: #ffffff2e; color: var(--qs-ink); }
.btn-ghost:hover { background: #ffffff14; }

/* form controls pin a white background in a razor inline style that no token can reach */
input, select, textarea { background: var(--qs-card-2) !important; color: var(--qs-ink) !important;
                          border-color: var(--qs-line) !important; }

/* ================================================================================================
   THE ARCHITECTURE DIAGRAM

   ⛔EVERY COLOUR IN IT WAS A HARD-CODED LIGHT VALUE INSIDE THE SVG MARKUP, so the whole diagram stayed
   a set of white boxes floating on a black page. ⚠And my route scan MISSED it: it captured the first
   1600px of each page and the diagram sits below that, so home scored 0.21% near-white and was called
   clean. A scan that cannot see the defect reports the same as one that finds nothing.

   ⭐The shapes keep their inline fill= as the LIGHT value. A presentation attribute loses to any CSS
   rule, so the light rendering is untouched and these override by class - the same override-layer
   discipline as the rest of this file, rather than editing colours into the markup twice.
   ================================================================================================ */

/* content sources: a surface, and a dashed one for the two that do not exist yet */
.arch-r-src     { fill: #141828; stroke: #39415a; }
.arch-r-planned { fill: #0d1018; stroke: #39415a; }

/* the apps keep their identity hues - the FILLS become deep tints of the same hue rather than pale
   ones, so a colour still means the same product it meant on white */
.arch-r-qmp { fill: #171d3d; stroke: #6d7cff; }
.arch-r-lib { fill: #0e1220; stroke: #6d7cff; }
.arch-r-qsm { fill: #2a1608; stroke: #fb923c; }
.arch-r-qrc { fill: #0b2420; stroke: #2dd4bf; }
.arch-r-qmt { fill: #281d09; stroke: #f5b342; }
.arch-r-qmr { fill: #1f1233; stroke: #c084fc; }

/* ⚠The label colours were picked to be readable ON WHITE, so they are the DARK end of each hue and
   unreadable on a deep tint of it. Same hues, light end. */
.arch-t-qmp { fill: #9aa6ff; }
.arch-t-qsm { fill: #fb923c; }
.arch-t-qrc { fill: #2dd4bf; }
.arch-t-qmt { fill: #f5b342; }
.arch-t-qmr { fill: #c084fc; }

/* connectors and arrow heads: #6b7280 is a mid grey that all but vanishes on near-black */
.arch-wire { stroke: #8b93a5; }
.arch-head { fill: #8b93a5; }

/* ⛔INLINE CODE CHIPS were #f3f4f6 - white pills scattered through the .qnfo pages. Caught by a BAND
   scan (worst 200-row window, not the page average): qnfo-spec came back 5.6% near-white in its top
   band while its whole-page figure was unremarkable. A light block far down a long page is a rounding
   error in an average, which is how the architecture diagram survived the previous sweep. */
.spec-list code, .app-section p code, .spec-table code { background: var(--qs-card-2); color: #e2c9ff; }

/* QSYNC Seminar - its own hue, like every other product on the diagram */
.arch-r-sem { fill: #2a0f18; stroke: #fb7185; }
.arch-t-sem { fill: #fda4af; }