/* theme-system-v96.css — 9.6.0-r4 theme layer.
 *
 * Loaded after every other stylesheet, so it is the final word on theming.
 *
 * WHAT WAS WRONG
 *
 * The product carries six generations of stylesheet (theme-v4 .. theme-v91) and
 * each generation introduced its own colour variables:
 *
 *   v4/v6 : --bg --bg-2 --panel --panel2 --surface --surface-2 --surface-3
 *           --brand --brand-2 --brand-3 --brand2 --theme-rgb --theme-rgb2
 *   v7    : --v7-bg --v7-surface --v7-surface2 --v7-surface3
 *           --v7-brand --v7-brand2 --v7-purple
 *   v9    : --v9-bg --v9-bg2 --v9-surface .. --v9-text --v9-accent (the current set)
 *
 * The six dark themes define all 41 variables. The four light themes define only
 * the 21 v9 ones. Everything still painted by a v4/v6/v7 rule therefore kept the
 * dark value while the page around it turned light — which is why the light
 * themes showed dark panels in places.
 *
 * Arctic hid this because theme-v91.css carries 19 extra rules that restyle the
 * top bar, header buttons and page title with hardcoded hex colours, locked to
 * [data-theme="arctic"]. Pick any other theme and those components lose their
 * styling entirely, which is why the dark themes looked broken at the top of the
 * page.
 *
 * WHAT THIS FILE DOES
 *
 * 1. Points the legacy variables at the canonical v9 set for the light themes,
 *    so all six generations render from one source of truth. Dark themes are
 *    left alone: they already define both sets deliberately.
 * 2. Rewrites those 19 arctic-only component rules as token-driven rules that
 *    apply to every theme.
 *
 * Adding a theme now means defining the v9 tokens and nothing else.
 */

/* ------------------------------------------------------------------
 * 1. Close the legacy-variable gap on the light themes.
 * ------------------------------------------------------------------ */
:root[data-theme="arctic"],
:root[data-theme="pearl"],
:root[data-theme="mintlight"],
:root[data-theme="sand"] {
  --bg: var(--v9-bg);
  --bg-2: var(--v9-bg2);
  --panel: var(--v9-surface);
  --panel2: var(--v9-surface2);
  --surface: var(--v9-surface);
  --surface-2: var(--v9-surface2);
  --surface-3: var(--v9-surface3);

  --brand: var(--v9-accent);
  --brand-2: var(--v9-accent2);
  --brand-3: var(--v9-accent2);
  --brand2: var(--v9-accent2);
  --theme-rgb: var(--v9-accent-rgb);
  --theme-rgb2: var(--v9-accent2-rgb);

  --v7-bg: var(--v9-bg);
  --v7-surface: var(--v9-surface);
  --v7-surface2: var(--v9-surface2);
  --v7-surface3: var(--v9-surface3);
  --v7-brand: var(--v9-accent);
  --v7-brand2: var(--v9-accent2);
  --v7-purple: var(--v9-accent2);

  /* Older sheets assume light text because they were authored dark-first. */
  --text: var(--v9-text);
  --muted: var(--v9-muted);
  --line: var(--v9-line);
}

/* ------------------------------------------------------------------
 * 2. Readable text on an accent-coloured surface.
 *
 * Most accents are saturated and take white. Graphite's accent is a pale grey,
 * so white-on-accent there is unreadable.
 * ------------------------------------------------------------------ */
:root[data-theme] {
  --svn96-on-accent: #ffffff;
}
:root[data-theme="graphite"] {
  --svn96-on-accent: #10131a;
}

/* ------------------------------------------------------------------
 * 3. The header, top bar and page title, for every theme.
 *
 * These replace the [data-theme="arctic"] rules in theme-v91.css, which used
 * literal colours and so applied to exactly one theme. !important is required
 * to override those, since they are themselves !important.
 * ------------------------------------------------------------------ */
:root[data-theme] .top,
:root[data-theme] .topbar,
:root[data-theme] .public-head {
  background: var(--v9-surface) !important;
  border-color: var(--v9-line) !important;
  color: var(--v9-text) !important;
}

:root[data-theme] .top .btn,
:root[data-theme] .topbar .btn,
:root[data-theme] .public-head .btn {
  background: var(--v9-surface2) !important;
  color: var(--v9-text) !important;
  border-color: var(--v9-line) !important;
}

:root[data-theme] .top .btn:hover,
:root[data-theme] .topbar .btn:hover,
:root[data-theme] .public-head .btn:hover {
  background: var(--v9-surface3) !important;
  border-color: var(--v9-accent) !important;
}

:root[data-theme] .top .btn.primary,
:root[data-theme] .topbar .btn.primary,
:root[data-theme] .public-head .btn.primary {
  background: var(--v9-accent) !important;
  color: var(--svn96-on-accent) !important;
  border-color: var(--v9-accent) !important;
}

:root[data-theme] #customer > .main > .top {
  background: var(--v9-surface) !important;
  border-bottom: 1px solid var(--v9-line) !important;
}
:root[data-theme] #customer > .main > .top:before,
:root[data-theme] #customer > .main > .top:after {
  display: none !important;
}
:root[data-theme] #customer > .main > .top #pageTitle {
  color: var(--v9-text) !important;
}
:root[data-theme] #customer > .main > .top #pageTitle + .muted,
:root[data-theme] #customer > .main > .top #pageTitle + div {
  color: var(--v9-muted) !important;
}
:root[data-theme] #customer > .main > .top .nav-actions .btn,
:root[data-theme] #customer > .main > .top #mobileMenu {
  background: var(--v9-surface2) !important;
  color: var(--v9-text) !important;
  border-color: var(--v9-line) !important;
}
:root[data-theme] #customer > .main > .top .nav-actions .btn:hover,
:root[data-theme] #customer > .main > .top #mobileMenu:hover {
  background: var(--v9-surface3) !important;
  border-color: var(--v9-accent) !important;
}

/* ------------------------------------------------------------------
 * 3b. The public storefront and the auth screen.
 *
 * theme-v91.css gives .v91-public its own light palette (--p-text:#102033 and
 * friends) and then pins about thirty text colours with literal hex values and
 * !important. It also sets `background:transparent!important`, so the page
 * background comes from the active theme while the text does not.
 *
 * On any dark theme that produced dark navy text on a dark background — the
 * hero headline measured a contrast ratio of 1.06, which is invisible.
 *
 * Mapping the local palette onto the theme tokens keeps Arctic looking exactly
 * as before (its tokens are those same values) while making every other theme
 * legible.
 * ------------------------------------------------------------------ */
:root[data-theme] .v91-public,
:root[data-theme] .auth-box {
  --p-text: var(--v9-text);
  --p-soft: var(--v9-text);
  --p-muted: var(--v9-muted);
  --p-line: var(--v9-line);
  --p-card: var(--v9-surface);
  --p-navy: var(--v9-bg);
  --p-blue: var(--v9-accent);
  --p-cyan: var(--v9-accent2);
}

/* Primary copy */
:root[data-theme] .v91-brand,
:root[data-theme] .v91-hero-copy h1,
:root[data-theme] .v91-section-title h2,
:root[data-theme] .v91-footer > div b,
:root[data-theme] .v91-core-card > footer button,
:root[data-theme] .auth-box,
:root[data-theme] .v91-product-grid .product {
  color: var(--v9-text) !important;
}

/* Secondary copy */
:root[data-theme] .v91-kicker,
:root[data-theme] .v91-hero-lead,
:root[data-theme] .v91-footer,
:root[data-theme] .v91-deploy-story > article > span,
:root[data-theme] .v91-product-grid .feature,
:root[data-theme] .v91-product-grid .price small,
:root[data-theme] .v91-product-grid .stock,
:root[data-theme] .auth-box > p,
:root[data-theme] .auth-box .field label,
:root[data-theme] .v9-auth-security {
  color: var(--v9-muted) !important;
}

/* Accent copy */
:root[data-theme] .v91-public .eyebrow,
:root[data-theme] .v91-infra-copy > span,
:root[data-theme] .v91-deploy-story > header > span,
:root[data-theme] .v91-final-cta > div > span,
:root[data-theme] .v91-deploy-story > article > b,
:root[data-theme] .v91-feature-card > span {
  color: var(--v9-accent) !important;
}

/* Panels that were pinned to a near-white fill */
:root[data-theme] .v9-auth-visual,
:root[data-theme] .v91-infrastructure-section {
  background: var(--v9-surface2) !important;
  color: var(--v9-text) !important;
}

/* The theme switcher itself lives in the public header on the storefront, so it
   is not covered by the .topbar rules above. */
:root[data-theme] .btn.hc-theme-trigger {
  background: var(--v9-surface2) !important;
  color: var(--v9-text) !important;
  border-color: var(--v9-line) !important;
}

/* ------------------------------------------------------------------
 * 4. Theme Studio swatches must read correctly against their own preview
 * colours rather than against the active theme.
 * ------------------------------------------------------------------ */
.svn-theme-card {
  background: var(--preview-bg) !important;
  color: var(--preview-fg) !important;
  border: 1px solid color-mix(in srgb, var(--preview-fg) 22%, transparent) !important;
}
.svn-theme-card b,
.svn-theme-card small {
  color: var(--preview-fg) !important;
}
.svn-theme-card small {
  opacity: 0.72;
}
.svn-theme-card .svn-theme-mode {
  background: var(--preview-accent) !important;
  color: var(--preview-bg) !important;
}
.svn-theme-card.active {
  outline: 2px solid var(--preview-accent) !important;
  outline-offset: 2px;
}

/* ------------------------------------------------------------------
 * 5. Selection, focus ring and scrollbars follow the theme too. These were
 * left at the v4 defaults and stayed blue on every theme.
 * ------------------------------------------------------------------ */
:root[data-theme] ::selection {
  background: color-mix(in srgb, var(--v9-accent) 30%, transparent);
  color: var(--v9-text);
}
:root[data-theme] :focus-visible {
  outline: 2px solid var(--v9-accent);
  outline-offset: 2px;
}
:root[data-theme] * {
  scrollbar-color: var(--v9-line) transparent;
}