/* STI dark overlay — implementation of
   /workspace/webdesign/theme/sti/STI-DARK-THEME-SPEC-2026-11-13.md
   Applies only when <html> has .sti-black-on (not on held /waitlist routes).
   Remaps live --rn-* / page chrome to the spec. Does not edit roicp-compute.css
   or held 31xx/33xx/35xx files. Not deployed in this run. */

html.sti-black-on {
  --sti-bg: #000000;
  --sti-bg-2: #111111;
  --sti-card: #111111;
  --sti-ink: #F6F9FC;
  --sti-ink-2: #E3EBF2;
  --sti-muted: #94A3B8;
  --sti-faint: #94A3B8;
  --sti-line: #2A2A2A;
  --sti-accent: #3E9BC9;
  --sti-accent-hover: #A8D4EA;
  --sti-btn: #0B74DE;
  --sti-btn-hover: #095CAD;
  --sti-btn-ink: #FFFFFF;
  --sti-accent-ink: #FFFFFF;
  --sti-link: var(--sti-accent);
  --sti-link-hover: var(--sti-accent-hover);
  --sti-pill-bg: #0D56A0;
  --sti-pill-text: #FFFFFF;
  --sti-focus-ring: var(--sti-accent);
  --sti-chart: var(--sti-btn);
  --sti-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sti-radius: 16px;
  --sti-radius-sm: 12px;
  --sti-text-body: clamp(16px, 0.247vw + 15.04px, 18px);
  --sti-text-h1: clamp(28px, 2vw + 22px, 42px);
  --sti-text-h2: clamp(22px, 1.2vw + 18px, 30px);
  --sti-text-h3: clamp(18px, 0.6vw + 16px, 22px);
  --sti-container: 1160px;

  --rn-paper: #000000;
  --rn-night: #000000;
  --rn-surface: #111111;
  --rn-mist: #111111;
  --rn-line: #2A2A2A;
  --rn-ink: #F6F9FC;
  --rn-ink-2: #E3EBF2;
  --rn-mut: #94A3B8;
  --rn-serif: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rn-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rn-mono: Inter, ui-sans-serif, system-ui, "SF Mono", ui-monospace, Menlo, monospace;
  --rn-moss: var(--sti-btn);
  --rn-moss-2: var(--sti-btn-hover);
  --rn-fern: var(--sti-accent);
  --rn-lake: var(--sti-accent);
  --rn-lake-2: #A8D4EA;
  --rn-gold: var(--sti-btn);
  --rn-gold-ink: #FFFFFF;
  --rn-info: var(--sti-accent);
  --rn-info-soft: rgba(62, 155, 201, 0.16);
  --rn-ok: #16A34A;
  --rn-warn: #D97706;
  --rn-bad: #FDECEC;
  --rn-max: 1160px;
  --rn-r-md: 12px;
  --rn-r-lg: 16px;
  --rn-r-xl: 16px;
  --rn-fs-md: clamp(16px, 0.247vw + 15.04px, 18px);
  --rn-fs-h1: clamp(28px, 2vw + 22px, 42px);
  --rn-fs-h2: clamp(22px, 1.2vw + 18px, 30px);
  --rn-fs-h3: clamp(18px, 0.6vw + 16px, 22px);
  --rn-focus: 0 0 0 2px #000000, 0 0 0 4px var(--sti-focus-ring);
  --rn-hairline: linear-gradient(90deg, transparent, var(--sti-accent), transparent);
  --nv-black: #000000;
  --nv-panel: #111111;
  --nv-panel-2: #111111;
  --nv-green: var(--sti-btn);
  --nv-green-2: var(--sti-btn-hover);
  --nv-glow: rgba(11, 116, 222, 0.35);
  --brand-accent: var(--sti-btn);
  --brand-accent-2: var(--sti-btn-hover);
  --brand-accent-rgb: 11, 116, 222;

  --ink: #F6F9FC;
  --mut: #94A3B8;
  --acc: var(--sti-btn);
  --acc2: var(--sti-btn-hover);
  --pop: var(--sti-accent);
  --tint: #111111;
  --ok: #16A34A;
  --warn: #D97706;
  --bad: #FDECEC;
}

html.sti-black-on,
html.sti-black-on body,
html.sti-black-on body.rn,
html.sti-black-on body.rn-grain,
html.sti-black-on #root,
html.sti-black-on header.top,
html.sti-black-on header.top .wrap,
html.sti-black-on footer,
html.sti-black-on .wrap {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #F6F9FC !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

html.sti-black-on body {
  font-size: clamp(16px, 0.247vw + 15.04px, 18px);
  line-height: 1.5;
  max-width: 100%;
  overflow-x: hidden;
}

html.sti-black-on h1 { font-size: clamp(28px, 2vw + 22px, 42px); line-height: 1.25; color: #F6F9FC !important; font-family: inherit !important; }
html.sti-black-on h2 { font-size: clamp(22px, 1.2vw + 18px, 30px); line-height: 1.25; color: #F6F9FC !important; font-family: inherit !important; }
html.sti-black-on h3 { font-size: clamp(18px, 0.6vw + 16px, 22px); line-height: 1.25; color: #F6F9FC !important; font-family: inherit !important; }

html.sti-black-on a { color: var(--sti-accent) !important; text-decoration: none; }
html.sti-black-on a:hover,
html.sti-black-on a:focus-visible { color: var(--sti-accent-hover) !important; text-decoration: underline; }

/* Primary buttons: spec fill #0B74DE, label #FFFFFF, radius 12. Don't leave paper-white on blue. */
html.sti-black-on .btn,
html.sti-black-on .sti-btn,
html.sti-black-on a.btn,
html.sti-black-on button.btn,
html.sti-black-on .rn-btn,
html.sti-black-on .rn-button,
html.sti-black-on a[class*="btn-primary"],
html.sti-black-on button[class*="btn-primary"] {
  background: var(--sti-btn) !important;
  background-color: var(--sti-btn) !important;
  color: var(--sti-btn-ink) !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  font-weight: 650;
  text-decoration: none !important;
}
html.sti-black-on .btn:hover,
html.sti-black-on .rn-btn:hover,
html.sti-black-on a.btn:hover {
  background: var(--sti-btn-hover) !important;
  color: var(--sti-btn-ink) !important;
  text-decoration: none !important;
}
html.sti-black-on .btn.alt,
html.sti-black-on .rn-btn-secondary,
html.sti-black-on .sti-btn-secondary {
  background: #111111 !important;
  color: #F6F9FC !important;
  border: 1px solid #2A2A2A !important;
  box-shadow: none !important;
}

html.sti-black-on .rn-card,
html.sti-black-on .card,
html.sti-black-on .panel,
html.sti-black-on .sti-card {
  background: #111111 !important;
  border: 1px solid #2A2A2A !important;
  border-radius: 16px !important;
  color: #F6F9FC !important;
}

html.sti-black-on input,
html.sti-black-on textarea,
html.sti-black-on select {
  background: #111111 !important;
  color: #F6F9FC !important;
  border: 1px solid #2A2A2A !important;
  border-radius: 12px !important;
  font-family: inherit;
}
html.sti-black-on input:focus,
html.sti-black-on textarea:focus,
html.sti-black-on select:focus,
html.sti-black-on a:focus-visible,
html.sti-black-on button:focus-visible,
html.sti-black-on .btn:focus-visible {
  outline: 2px solid var(--sti-focus-ring) !important;
  outline-offset: 2px;
}

html.sti-black-on img, html.sti-black-on svg, html.sti-black-on video, html.sti-black-on iframe {
  max-width: 100%;
  height: auto;
}

html.sti-black-on .wrap,
html.sti-black-on .rn-wrap,
html.sti-black-on .site-wrap,
html.sti-black-on main {
  max-width: 1160px;
  box-sizing: border-box;
}


/* --- visual QA fixes 2026-11-13 (after looking at 390/768/1280/1920 shots) --- */

/* Do not clamp the hero/header/footer to 1160px — that left a large empty
   right column at 1920. Only inner wraps are centered at the marketing width. */
html.sti-black-on main {
  max-width: none;
  width: 100%;
}
html.sti-black-on .wrap,
html.sti-black-on .rn-wrap {
  max-width: 1160px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
html.sti-black-on .site-hero,
html.sti-black-on header,
html.sti-black-on header.top,
html.sti-black-on footer,
html.sti-black-on .site-footer {
  max-width: none;
  width: 100%;
}

/* Pre-existing hero lead / product-card overlap at desktop. Keep the lead
   above the scene and give it a solid stop so letters don't run under the card. */
@media (min-width: 900px) {
  html.sti-black-on .site-hero__copy,
  html.sti-black-on .site-hero .rn-wrap { z-index: 2; }
  html.sti-black-on .site-hero .rn-lead {
    position: relative;
    z-index: 3;
    max-width: 32rem;
    padding: 0 1.25rem 0.25rem 0;
    background: linear-gradient(90deg, var(--sti-bg, #000) 72%, transparent 100%);
  }
  html.sti-black-on .site-hero__scene { opacity: 0.28; z-index: 0; }
}

/* Secondary / alt buttons must not be painted as primary blue. */
html.sti-black-on a.rn-btn.alt,
html.sti-black-on .rn-btn.alt,
html.sti-black-on .btn.alt {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--sti-accent) !important;
  border: 1px solid #2A2A2A !important;
  box-shadow: none !important;
}
html.sti-black-on a.rn-btn.alt:hover,
html.sti-black-on .btn.alt:hover {
  background: #111111 !important;
  color: var(--sti-accent-hover) !important;
  text-decoration: none !important;
}

/* Nature comic chrome uses 3px ink borders and ink-colored offset shadows.
   After ink remaps to #F6F9FC those shadows read as cream slabs on black. */
html.sti-black-on header.top,
html.sti-black-on .hero,
html.sti-black-on .card,
html.sti-black-on .card.price,
html.sti-black-on .disc,
html.sti-black-on .band,
html.sti-black-on .tabs button {
  border-color: #2A2A2A !important;
  box-shadow: none !important;
}
html.sti-black-on .hero {
  background: #000000 !important;
  background-image: none !important;
  border-bottom: 1px solid #2A2A2A !important;
}
html.sti-black-on .card,
html.sti-black-on .card.price,
html.sti-black-on #pricing .card,
html.sti-black-on .disc {
  background: #111111 !important;
  background-image: none !important;
  color: #F6F9FC !important;
}
html.sti-black-on .band,
html.sti-black-on .rn-band,
html.sti-black-on .site-band {
  background: #111111 !important;
  background-image: none !important;
  color: #F6F9FC !important;
  border: 1px solid #2A2A2A !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
html.sti-black-on .band a,
html.sti-black-on .rn-band a:not(.rn-btn):not(.btn) {
  color: var(--sti-accent) !important;
}
html.sti-black-on .price .amt { color: #F6F9FC !important; }
html.sti-black-on header.top {
  background: #000000 !important;
  border-bottom: 1px solid #2A2A2A !important;
}
html.sti-black-on .site-section.alt,
html.sti-black-on section.alt {
  background: #000000 !important;
  background-image: none !important;
  border-color: #2A2A2A !important;
}
html.sti-black-on .site-band:before,
html.sti-black-on .rn-band:before {
  background: none !important;
  content: none !important;
}

/* Band is #111 — keep the primary button blue with a white label (spec). */
html.sti-black-on .band .btn,
html.sti-black-on .band a.btn,
html.sti-black-on .band .rn-btn,
html.sti-black-on .rn-band .rn-btn:not(.alt),
html.sti-black-on .site-band .rn-btn:not(.alt) {
  background: var(--sti-btn) !important;
  color: var(--sti-btn-ink) !important;
  border: 1px solid transparent !important;
}
html.sti-black-on .band .btn:hover,
html.sti-black-on .band a.btn:hover,
html.sti-black-on .rn-band .rn-btn:not(.alt):hover {
  background: var(--sti-btn-hover) !important;
  color: var(--sti-btn-ink) !important;
  text-decoration: none !important;
}
html.sti-black-on .band .btn.alt,
html.sti-black-on .rn-band .rn-btn.alt,
html.sti-black-on .site-band .rn-btn.alt {
  background: transparent !important;
  color: var(--sti-accent) !important;
  border: 1px solid #2A2A2A !important;
}
html.sti-black-on #what-you-get .card,
html.sti-black-on #what-you-get .disc {
  background: #111111 !important;
  background-image: none !important;
  color: #F6F9FC !important;
  border-color: #2A2A2A !important;
}


/* Product Lead Edo Chicago skyline — dissolve into #000, no box edges. */
html.sti-black-on .hero,
html.sti-black-on .site-hero {
  position: relative;
  overflow: hidden;
  background-color: #000000 !important;
}
html.sti-black-on .hero .scene,
html.sti-black-on .hero picture.scene,
html.sti-black-on .site-hero .edo-skyline,
html.sti-black-on .edo-skyline {
  position: absolute;
  right: 0;
  bottom: 0;
  top: auto;
  width: min(58vw, 720px);
  height: auto;
  max-height: 100%;
  pointer-events: none;
  z-index: 0;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none !important;
}
html.sti-black-on .hero picture.scene img,
html.sti-black-on .edo-skyline img,
html.sti-black-on .site-hero .edo-skyline img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  /* extra dissolve on the left into the #000 field; art already fades at the edges */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 100%);
}
html.sti-black-on .hero .wrap,
html.sti-black-on .site-hero .rn-wrap,
html.sti-black-on .site-hero__copy {
  position: relative;
  z-index: 2;
}
/* 9:16 crop arrives as chicago-edo-skyline-9x16-1080.webp; keep object-position as a fallback. */
@media (max-width: 500px) {
  html.sti-black-on .hero .scene,
  html.sti-black-on .hero picture.scene,
  html.sti-black-on .site-hero .edo-skyline,
  html.sti-black-on .edo-skyline {
    width: 100%;
    left: 0;
    right: 0;
    opacity: 0.55;
  }
  html.sti-black-on .hero picture.scene img,
  html.sti-black-on .edo-skyline img,
  html.sti-black-on .site-hero .edo-skyline img {
    object-fit: cover;
    object-position: center 70%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 100%);
  }
}

/* SPA heroes: place the opaque skyline on the #000 field, right side. */
html.sti-black-on .site-hero {
  background-image: image-set(
    url("/art/chicago-edo-skyline-900.webp") 1x,
    url("/art/chicago-edo-skyline-1600.webp") 2x
  ) !important;
  background-repeat: no-repeat !important;
  background-position: right bottom !important;
  background-size: min(58vw, 720px) auto !important;
  background-color: #000000 !important;
}
@media (max-width: 500px) {
  html.sti-black-on .site-hero {
    background-image: url("/art/chicago-edo-skyline-9x16-1080.webp") !important;
    background-position: center 70% !important;
    background-size: cover !important;
  }
}

/* Alpha skyline on #111 cards / empty states — ink in the alpha channel, no edge. */
html.sti-black-on .edo-skyline--alpha,
html.sti-black-on .crm-empty .edo-skyline,
html.sti-black-on .crm-header-art {
  background-color: transparent !important;
}

/* micro-SaaS additions (2026-11-14 4:20 AM CT): real app screenshots + What you get */
html.sti-black-on #see-it .shots { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 980px; }
html.sti-black-on #see-it figure.shot { margin: 0; background: #111111; border: 1px solid #2A2A2A; border-radius: 16px; padding: 12px; overflow: hidden; }
html.sti-black-on #see-it figure.shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid #2A2A2A; }
html.sti-black-on #see-it figcaption { color: #94A3B8 !important; font-size: 0.9rem; margin-top: 10px; line-height: 1.45; }
html.sti-black-on #what-you-get .card.price ul { padding-left: 1.1em; margin: 0.4em 0 0; }
html.sti-black-on #what-you-get .card.price li { color: #E3EBF2; margin: 0.25em 0; }
html.sti-black-on .tbl, html.sti-black-on .table-wrap { max-width: 100%; overflow-x: auto; }
/* Hero wrap must not paint #000 over the skyline (found in 4:2x AM CT preview: art was hidden behind .wrap). */
html.sti-black-on .hero .wrap { background: transparent !important; background-color: transparent !important; }
@media (min-width: 501px) and (max-width: 1100px) {
  html.sti-black-on .hero picture.scene { opacity: 0.5; }
}
/* Live QA fixes 2026-11-14 ~4:25 AM CT: light boxes left by the kit */
html.sti-black-on pre#summary, html.sti-black-on pre { background: #111111 !important; color: #F6F9FC !important; border: 1px solid #2A2A2A !important; }
html.sti-black-on .tabs button { background: #111111 !important; color: #F6F9FC !important; border: 1px solid #2A2A2A !important; border-radius: 12px; min-height: 40px; }
html.sti-black-on .tabs button.on { background: var(--sti-btn) !important; color: var(--sti-btn-ink) !important; border-color: var(--sti-btn) !important; }
html.sti-black-on .rn-skip { background: var(--sti-btn) !important; color: var(--sti-btn-ink) !important; }
html.sti-black-on input[type=file]::file-selector-button { background: #111111 !important; color: #F6F9FC !important; border: 1px solid #2A2A2A !important; }


/* v0.3.0 — per-app accents (buttons, links, pills, focus, charts only). */
html.sti-black-on .pill,
html.sti-black-on .sti-pill-accent {
  background: var(--sti-pill-bg) !important;
  color: var(--sti-pill-text) !important;
  border-color: var(--sti-pill-text) !important;
}
html.sti-black-on .bar,
html.sti-black-on .chart i,
html.sti-black-on [data-chart-bar] {
  background: var(--sti-chart) !important;
  background-color: var(--sti-chart) !important;
}
html.sti-black-on a:hover,
html.sti-black-on a:focus-visible { color: var(--sti-accent-hover) !important; }
html.sti-black-on .btn:focus-visible,
html.sti-black-on a.btn:focus-visible,
html.sti-black-on button:focus-visible,
html.sti-black-on input:focus-visible,
html.sti-black-on select:focus-visible,
html.sti-black-on textarea:focus-visible {
  outline: 2px solid var(--sti-focus-ring) !important;
  outline-offset: 2px;
}

/* Single canonical nav row. Below 480px the STI label shortens and the row wraps; see P2 nav390. */
html.sti-black-on header.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
html.sti-black-on header.top nav[aria-label="Primary"] {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  margin: 0;
  min-width: 0;
  max-width: 100%;
}
html.sti-black-on header.top nav[aria-label="Primary"] a {
  margin-left: 0 !important;
  white-space: nowrap;
  font-size: 0.92rem;
}
html.sti-black-on .tool-jump {
  margin: 0 0 12px;
  font-size: 0.88rem;
  color: #94A3B8;
}
html.sti-black-on footer ul.canon-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  list-style: none;
  padding: 12px 0 0;
  margin: 0;
}
html.sti-black-on footer ul.canon-footer li { margin: 0; }
@media (max-width: 700px) {
  html.sti-black-on header.top .brand { flex: 1 0 auto; }
  html.sti-black-on header.top nav[aria-label="Primary"] {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 4px;
    gap: 14px;
  }
  html.sti-black-on header.top nav[aria-label="Primary"] a { font-size: 0.8rem; }
}

/* P2 nav390: below 480px only, short "STI" label, wrap all six links, hide .tool-jump. Desktop unchanged. */
html.sti-black-on header.top nav[aria-label="Primary"] .nav-label-short { display: none; }

@media (max-width: 480px) {
  html.sti-black-on header.top nav[aria-label="Primary"] .nav-label-full { display: none; }
  html.sti-black-on header.top nav[aria-label="Primary"] .nav-label-short { display: inline; }
  html.sti-black-on header.top nav[aria-label="Primary"] {
    display: flex;
    flex-wrap: wrap;
    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
    width: 100%;
    max-width: 100%;
    gap: 8px 14px;
    padding-bottom: 0;
    -webkit-overflow-scrolling: auto;
  }
  html.sti-black-on header.top nav[aria-label="Primary"] a {
    font-size: 0.8rem;
    white-space: nowrap;
  }
  html.sti-black-on .tool-jump { display: none; }
}

/* 390 hero: shorter chrome, visible 9:16 skyline, headline + CTA above the fold. */
@media (max-width: 500px) {
  html.sti-black-on .hero {
    min-height: 520px;
    padding-bottom: 0 !important;
  }
  html.sti-black-on .hero .wrap {
    padding: 16px 16px 12px !important;
  }
  html.sti-black-on .hero h1 {
    font-size: clamp(1.55rem, 7.5vw, 2.05rem) !important;
    margin: 0.15em 0 0.3em !important;
  }
  html.sti-black-on .hero .lead {
    font-size: 1rem !important;
    margin-bottom: 0.8em;
  }
  html.sti-black-on .hero .scene,
  html.sti-black-on .hero picture.scene {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    height: 280px;
    min-height: 240px;
    opacity: 0.92 !important;
  }
  html.sti-black-on .hero picture.scene img {
    object-fit: cover !important;
    object-position: center 55% !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 100%) !important;
            mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 100%) !important;
  }
  html.sti-black-on .hero .btn { min-height: 44px; }
}


/* v0.3.0 [data-app] accent overlays — buttons, links, pills, focus, charts only. */

html.sti-black-on[data-app="changeorderlog"] {
  /* ChangeOrderLog accent — sti-black v0.3.0. Buttons, links, pills, focus, charts only. */
  --sti-btn:#B35E09;
  --sti-btn-hover:#8F4A04;
  --sti-btn-ink:#FFFFFF;
  --sti-accent-ink:#FFFFFF;
  --sti-blue:#B35E09;
  --sti-blue-dark:#8F4A04;
  --sti-accent:#DA822B;
  --sti-accent-hover:#D9B087;
  --sti-link:#DA822B;
  --sti-link-hover:#D9B087;
  --sti-pill-bg:#82470B;
  --sti-pill-text:#FFFFFF;
  --sti-focus-ring:#DA822B;
  --sti-chart:#B35E09;
}


html.sti-black-on[data-app="comebacklist"] {
  /* ComebackList accent — sti-black v0.3.0. Buttons, links, pills, focus, charts only. */
  --sti-btn:#F57547;
  --sti-btn-hover:#F8561C;
  --sti-btn-ink:#000000;
  --sti-accent-ink:#000000;
  --sti-blue:#F57547;
  --sti-blue-dark:#F8561C;
  --sti-accent:#E17C57;
  --sti-accent-hover:#E6BDAF;
  --sti-link:#E17C57;
  --sti-link-hover:#E6BDAF;
  --sti-pill-bg:#B15737;
  --sti-pill-text:#FFFFFF;
  --sti-focus-ring:#E17C57;
  --sti-chart:#F57547;
}


html.sti-black-on[data-app="countcheck"] {
  /* CountCheck accent — sti-black v0.3.0. Buttons, links, pills, focus, charts only. */
  --sti-btn:#82EF39;
  --sti-btn-hover:#69F10E;
  --sti-btn-ink:#000000;
  --sti-accent-ink:#000000;
  --sti-blue:#82EF39;
  --sti-blue-dark:#69F10E;
  --sti-accent:#70AE47;
  --sti-accent-hover:#A4C190;
  --sti-link:#70AE47;
  --sti-link-hover:#A4C190;
  --sti-pill-bg:#60AC2D;
  --sti-pill-text:#000000;
  --sti-focus-ring:#70AE47;
  --sti-chart:#82EF39;
}


html.sti-black-on[data-app="depositmatch"] {
  /* DepositMatch accent — sti-black v0.3.0. Buttons, links, pills, focus, charts only. */
  --sti-btn:#FBCE39;
  --sti-btn-hover:#FFC70C;
  --sti-btn-ink:#000000;
  --sti-accent-ink:#000000;
  --sti-blue:#FBCE39;
  --sti-blue-dark:#FFC70C;
  --sti-accent:#AE9647;
  --sti-accent-hover:#C1B690;
  --sti-link:#AE9647;
  --sti-link-hover:#C1B690;
  --sti-pill-bg:#B5952D;
  --sti-pill-text:#000000;
  --sti-focus-ring:#AE9647;
  --sti-chart:#FBCE39;
}


html.sti-black-on[data-app="feeddoctor"] {
  /* FeedDoctor accent — sti-black v0.3.0. Buttons, links, pills, focus, charts only. */
  --sti-btn:#0D8740;
  --sti-btn-hover:#07642E;
  --sti-btn-ink:#FFFFFF;
  --sti-accent-ink:#FFFFFF;
  --sti-blue:#0D8740;
  --sti-blue-dark:#07642E;
  --sti-accent:#47AE72;
  --sti-accent-hover:#90C1A5;
  --sti-link:#47AE72;
  --sti-link-hover:#90C1A5;
  --sti-pill-bg:#0E6432;
  --sti-pill-text:#FFFFFF;
  --sti-focus-ring:#47AE72;
  --sti-chart:#0D8740;
}


html.sti-black-on[data-app="leadlag"] {
  /* LeadLag accent — sti-black v0.3.0. Buttons, links, pills, focus, charts only. */
  --sti-btn:#5858E4;
  --sti-btn-hover:#3030E3;
  --sti-btn-ink:#FFFFFF;
  --sti-accent-ink:#FFFFFF;
  --sti-blue:#5858E4;
  --sti-blue-dark:#3030E3;
  --sti-accent:#8E8EEB;
  --sti-accent-hover:#D0D0F0;
  --sti-link:#8E8EEB;
  --sti-link-hover:#D0D0F0;
  --sti-pill-bg:#4343A5;
  --sti-pill-text:#FFFFFF;
  --sti-focus-ring:#8E8EEB;
  --sti-chart:#5858E4;
}


html.sti-black-on[data-app="listlint"] {
  /* ListLint accent — sti-black v0.3.0. Buttons, links, pills, focus, charts only. */
  --sti-btn:#DBF206;
  --sti-btn-hover:#BACE01;
  --sti-btn-ink:#000000;
  --sti-accent-ink:#000000;
  --sti-blue:#DBF206;
  --sti-blue-dark:#BACE01;
  --sti-accent:#A4AE47;
  --sti-accent-hover:#BCC190;
  --sti-link:#A4AE47;
  --sti-link-hover:#BCC190;
  --sti-pill-bg:#9EAE09;
  --sti-pill-text:#000000;
  --sti-focus-ring:#A4AE47;
  --sti-chart:#DBF206;
}


html.sti-black-on[data-app="polag"] {
  /* POLag accent — sti-black v0.3.0. Buttons, links, pills, focus, charts only. */
  --sti-btn:#F55CDB;
  --sti-btn-hover:#F731D5;
  --sti-btn-ink:#000000;
  --sti-accent-ink:#000000;
  --sti-blue:#F55CDB;
  --sti-blue-dark:#F731D5;
  --sti-accent:#E469CF;
  --sti-accent-hover:#EBBEE3;
  --sti-link:#E469CF;
  --sti-link-hover:#EBBEE3;
  --sti-pill-bg:#B1469E;
  --sti-pill-text:#FFFFFF;
  --sti-focus-ring:#E469CF;
  --sti-chart:#F55CDB;
}


html.sti-black-on[data-app="renewaldue"] {
  /* RenewalDue accent — sti-black v0.3.0. Buttons, links, pills, focus, charts only. */
  --sti-btn:#F0A05A;
  --sti-btn-hover:#F18A30;
  --sti-btn-ink:#000000;
  --sti-accent-ink:#000000;
  --sti-blue:#F0A05A;
  --sti-blue-dark:#F18A30;
  --sti-accent:#DB8133;
  --sti-accent-hover:#DBB28E;
  --sti-link:#DB8133;
  --sti-link-hover:#DBB28E;
  --sti-pill-bg:#AD7544;
  --sti-pill-text:#000000;
  --sti-focus-ring:#DB8133;
  --sti-chart:#F0A05A;
}


html.sti-black-on[data-app="tripsplit"] {
  /* TripSplit accent — sti-black v0.3.0. Buttons, links, pills, focus, charts only. */
  --sti-btn:#15B0C1;
  --sti-btn-hover:#0E91A0;
  --sti-btn-ink:#000000;
  --sti-accent-ink:#000000;
  --sti-blue:#15B0C1;
  --sti-blue-dark:#0E91A0;
  --sti-accent:#47A4AF;
  --sti-accent-hover:#91BCC1;
  --sti-link:#47A4AF;
  --sti-link-hover:#91BCC1;
  --sti-pill-bg:#14808C;
  --sti-pill-text:#FFFFFF;
  --sti-focus-ring:#47A4AF;
  --sti-chart:#15B0C1;
}