/* Locus site-wide theme tokens -- card #680 (site retrofit to the ratified Locus kit).

   One custom-property set on :root. Every themed surface (Home.razor, NavMenu, MainLayout,
   app.css) reads these tokens via var() and never the media query or [data-theme] selector
   directly -- that discipline is what lets a future light/dark toggle just set an attribute
   with no other file changing (architect ruling, 2026-08-06).

   Precedence, by CSS specificity (not source order):
     1. :root[data-theme="dark"] / :root[data-theme="light"] / :root[data-theme="high-contrast"]
        -- an attribute selector on :root is more specific than the bare :root selector below, so
        an explicit toggle always wins, in both directions, over whatever the OS preference says.
     2. @media (prefers-color-scheme: dark) { :root { ... } }  -- same specificity as the base
        :root block (media queries don't add specificity), so it only wins because it is the
        later, conditionally-active rule -- exactly the "auto-swap with the OS" behavior wanted
        when no [data-theme] override is present.
     3. :root { ... } -- the light default.

   Card #2635: added the explicit theme picker (NavMenu.razor) that sets [data-theme] to
   "light"/"dark"/"high-contrast", or removes it entirely for "system" (the default, which stores
   nothing in localStorage and falls through to rule 2 above) -- see wwwroot/js/site-theme.js and
   site-theme-bootstrap.js for the persistence/early-apply mechanics, same pattern as the
   devops-team HUD (Factory Operations Heads-Up Display)'s hud-theme.js. "high-contrast" is new:
   a WCAG (Web Content Accessibility Guidelines) AAA-targeted palette (>=7:1 body text, >=4.5:1
   large text/UI, visible focus indicators), not a port of anything the HUD has -- see the
   contrast table in this kit's README.md. Windows forced-colors mode (component-level
   @media (forced-colors: active) rules, e.g. AlleleDashboard.razor.css) still overrides every
   theme below, including this one -- forced-colors is a user-agent-enforced override applied on
   top of whatever author CSS computes, not another value this attribute competes with, so
   nothing here needs to special-case it.

   Locus-parent tokens (--locus-navy, --locus-cream, --locus-glacier-*, --locus-dawn,
   --locus-font-*) come from /brand/brand.css and are only ever read here via var(), never
   redefined -- this file adds no product-kit token and changes no product-kit file.

   Exhibit/specimen surfaces -- the brand LOCKUP marks only (.stravon-lockup/.allele-lockup in
   StravonDashboard.razor.css/AlleleDashboard.razor.css; Allele.razor.css's own copy was retired by
   card #738) -- keep their own fixed kit ink/accent and do not consume these --lc-* tokens; see
   LockupHeaderContrastTests.cs (card #537) for why those specific selectors must never gain a
   prefers-color-scheme block of their own. Card #2667: this no longer extends to the surrounding
   page/dashboard ground itself -- .lc-page and .lc-card (app.css) read --lc-ground/--lc-ground-card
   like every other themed surface, so each lockup's existing [data-theme] hooks now sit on a
   ground that actually changes underneath them, instead of a permanently light one. */

:root {
  --lc-ground: var(--locus-cream, #faf9f5);
  --lc-ground-alt: #eef2f7;
  --lc-ground-card: #ffffff;
  --lc-ink: var(--locus-navy, #12395b);
  --lc-ink-muted: #556b85;
  --lc-border: #dce4ef;

  /* Fixed dark chrome band (hero/nav/footer/CTA banner) -- "dusk" is unchanged by theme, per the
     architect's dark reference ("hero keeps navy and converges"): these bands are already dark
     in light mode, so there is nothing to swap. */
  --lc-dusk: #0a1628;
  --lc-on-dusk: #ffffff;
  --lc-on-dusk-muted: #b0c8e4;

  --lc-accent-deep: var(--locus-glacier-deep, #2E6E96);
  --lc-accent-light: var(--locus-glacier-light, #7FB6D9);
  --lc-accent-resolve: var(--locus-dawn, #E0A458);

  /* Home.razor's Product Family row: each member's own kit accent (from /brand/brand.css, read
     via var() only -- no product-kit token is redefined here), swapped to the -light variant on
     dark grounds per the architect's "marks re-ink ... with each kit's light accent" ruling. For
     Stravon specifically this resolves to the EXISTING --stravon-teal-light #4fd1b3 already
     ratified in card #499, used as-is. Card #696 adds Variorum/Chirograph the same way (their own
     -deep/-light token pairs already exist in /brand/brand.css); Mixer4AI carries no such pair
     (own-brand ruling, no Locus-family light/dark split for it -- wwwroot/brand/mixer4ai/README.md),
     so its token is the single hardcoded rust accent from the vendored mark, identical in every
     block below rather than swapping -- SiteThemeTokenTests.cs's
     "SiteThemeCss_EveryBlockRedefinesTheExactSameTokenSet" only requires the same *token names*
     across all four blocks, not that every token's value differs between them. */
  --lc-family-allele-accent: var(--allele-gold-deep, #b8842a);
  --lc-family-stravon-accent: var(--stravon-teal-deep, #1c7d6c);
  --lc-family-variorum-accent: var(--variorum-crimson-deep, #9c3b3b);
  --lc-family-cartulary-accent: var(--cartulary-graphite-deep, #52606d);
  --lc-family-mixer4ai-accent: #a3542a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --lc-ground: #0D1620;
    --lc-ground-alt: #101c28;
    --lc-ground-card: #14283B;
    --lc-ink: var(--locus-cream, #faf9f5);
    --lc-ink-muted: #b0c8e4;
    --lc-border: rgba(250, 249, 245, 0.14);

    --lc-dusk: #0a1628;
    --lc-on-dusk: #ffffff;
    --lc-on-dusk-muted: #b0c8e4;

    --lc-accent-deep: var(--locus-glacier-light, #7FB6D9);
    --lc-accent-light: var(--locus-glacier-light, #7FB6D9);
    --lc-accent-resolve: var(--locus-dawn, #E0A458);

    --lc-family-allele-accent: var(--allele-gold-light, #e6b24d);
    --lc-family-stravon-accent: var(--stravon-teal-light, #4fd1b3);
    --lc-family-variorum-accent: var(--variorum-crimson-light, #dd9a9a);
    --lc-family-cartulary-accent: var(--cartulary-graphite-light, #aebbc7);
    --lc-family-mixer4ai-accent: #a3542a;
  }
}

:root[data-theme="dark"] {
  --lc-ground: #0D1620;
  --lc-ground-alt: #101c28;
  --lc-ground-card: #14283B;
  --lc-ink: var(--locus-cream, #faf9f5);
  --lc-ink-muted: #b0c8e4;
  --lc-border: rgba(250, 249, 245, 0.14);

  --lc-dusk: #0a1628;
  --lc-on-dusk: #ffffff;
  --lc-on-dusk-muted: #b0c8e4;

  --lc-accent-deep: var(--locus-glacier-light, #7FB6D9);
  --lc-accent-light: var(--locus-glacier-light, #7FB6D9);
  --lc-accent-resolve: var(--locus-dawn, #E0A458);

  --lc-family-allele-accent: var(--allele-gold-light, #e6b24d);
  --lc-family-stravon-accent: var(--stravon-teal-light, #4fd1b3);
  --lc-family-variorum-accent: var(--variorum-crimson-light, #dd9a9a);
  --lc-family-cartulary-accent: var(--cartulary-graphite-light, #aebbc7);
  --lc-family-mixer4ai-accent: #a3542a;
}

:root[data-theme="light"] {
  --lc-ground: var(--locus-cream, #faf9f5);
  --lc-ground-alt: #eef2f7;
  --lc-ground-card: #ffffff;
  --lc-ink: var(--locus-navy, #12395b);
  --lc-ink-muted: #556b85;
  --lc-border: #dce4ef;

  --lc-dusk: #0a1628;
  --lc-on-dusk: #ffffff;
  --lc-on-dusk-muted: #b0c8e4;

  --lc-accent-deep: var(--locus-glacier-deep, #2E6E96);
  --lc-accent-light: var(--locus-glacier-light, #7FB6D9);
  --lc-accent-resolve: var(--locus-dawn, #E0A458);

  --lc-family-allele-accent: var(--allele-gold-deep, #b8842a);
  --lc-family-stravon-accent: var(--stravon-teal-deep, #1c7d6c);
  --lc-family-variorum-accent: var(--variorum-crimson-deep, #9c3b3b);
  --lc-family-cartulary-accent: var(--cartulary-graphite-deep, #52606d);
  --lc-family-mixer4ai-accent: #a3542a;
}

/* Card #2635: pure black/white ground+ink (21:1 -- see README.md's contrast table for every
   pair's computed ratio) with a gold/cyan accent pair chosen to clear 7:1 against black even
   though both tokens are only ever used for large text/UI elements (buttons, links, category
   labels), not body copy. Family accent tokens are unified on the same gold rather than kept
   brand-distinct -- legibility, not brand parity, is this theme's job (same precedent as
   --lc-family-mixer4ai-accent carrying one value across every other block already). */
:root[data-theme="high-contrast"] {
  --lc-ground: #000000;
  --lc-ground-alt: #000000;
  --lc-ground-card: #000000;
  --lc-ink: #ffffff;
  --lc-ink-muted: #e6e6e6;
  --lc-border: #ffffff;

  --lc-dusk: #000000;
  --lc-on-dusk: #ffffff;
  --lc-on-dusk-muted: #e6e6e6;

  --lc-accent-deep: #ffd700;
  --lc-accent-light: #ffd700;
  --lc-accent-resolve: #00ffff;

  --lc-family-allele-accent: #ffd700;
  --lc-family-stravon-accent: #ffd700;
  --lc-family-variorum-accent: #ffd700;
  --lc-family-cartulary-accent: #ffd700;
  --lc-family-mixer4ai-accent: #ffd700;
}

/* Card #2635 acceptance criterion 3: visible focus indicators, site-wide, under this theme --
   not scoped to any one control this card adds, since every focusable element on every page
   needs to clear this bar once high-contrast is chosen. outline-offset keeps the ring from
   touching the element's own border (--lc-border is also pure white here). */
:root[data-theme="high-contrast"] :focus-visible {
  outline: 3px solid var(--lc-accent-deep, #ffd700) !important;
  outline-offset: 2px;
}