/*
 * JustTekno theme contract — 2026-08-09
 * Loaded after every historical presentation layer. The selected theme is the
 * single source of truth for page, section, card, form and application surfaces.
 */

html[data-theme="light"] {
  color-scheme: light;
  --jt-theme-bg: #f4f7fa;
  --jt-theme-bg-deep: #edf2f6;
  --jt-theme-surface: #ffffff;
  --jt-theme-surface-2: #e9f0f4;
  --jt-theme-surface-3: #dfe9ef;
  --jt-theme-ink: #10283a;
  --jt-theme-muted: #526b7c;
  --jt-theme-line: #d3e0e7;
  --jt-theme-brand: #006b7a;
  --jt-theme-blue: #176eb1;
  --jt-theme-mint: #087d68;
  --jt-theme-violet: #6551b9;
  --jt-theme-shadow: 0 22px 64px rgba(25, 58, 77, .11);
  --jt-theme-shadow-soft: 0 10px 34px rgba(25, 58, 77, .07);
  --jt-theme-hero: radial-gradient(circle at 82% 14%, rgba(8, 127, 145, .12), transparent 30%), linear-gradient(145deg, #fbfdfe, #eaf1f5);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --jt-theme-bg: #0b151f;
  --jt-theme-bg-deep: #07111a;
  --jt-theme-surface: #132230;
  --jt-theme-surface-2: #0f1c28;
  --jt-theme-surface-3: #1b2d3d;
  --jt-theme-ink: #edf6fb;
  --jt-theme-muted: #a8bac7;
  --jt-theme-line: #2a4050;
  --jt-theme-brand: #55d5db;
  --jt-theme-blue: #69b4f0;
  --jt-theme-mint: #65dcbd;
  --jt-theme-violet: #b2a0ff;
  --jt-theme-shadow: 0 24px 70px rgba(0, 0, 0, .32);
  --jt-theme-shadow-soft: 0 12px 38px rgba(0, 0, 0, .23);
  --jt-theme-hero: radial-gradient(circle at 82% 14%, rgba(85, 213, 219, .11), transparent 30%), linear-gradient(145deg, #09141e, #112331);
}

/* Synchronize every token family still used by older pages. */
html[data-theme] {
  --w-bg: var(--jt-theme-bg);
  --w-surface: var(--jt-theme-surface);
  --w-surface-2: var(--jt-theme-surface-2);
  --w-surface-3: var(--jt-theme-surface-3);
  --w-ink: var(--jt-theme-ink);
  --w-muted: var(--jt-theme-muted);
  --w-line: var(--jt-theme-line);
  --w-brand: var(--jt-theme-brand);
  --w-blue: var(--jt-theme-blue);
  --w-navy: var(--jt-theme-bg-deep);
  --w-positive: var(--jt-theme-mint);
  --w-shadow: var(--jt-theme-shadow);
  --w-shadow-soft: var(--jt-theme-shadow-soft);
  --w-hero: var(--jt-theme-hero);

  --el-bg: var(--jt-theme-bg);
  --el-soft: var(--jt-theme-surface-2);
  --el-surface: var(--jt-theme-surface);
  --el-ink: var(--jt-theme-ink);
  --el-muted: var(--jt-theme-muted);
  --el-line: var(--jt-theme-line);
  --el-brand: var(--jt-theme-brand);
  --el-brand-2: var(--jt-theme-blue);
  --el-navy: var(--jt-theme-bg-deep);
  --el-shadow: var(--jt-theme-shadow-soft);

  --jt26-bg: var(--jt-theme-bg);
  --jt26-bg-deep: var(--jt-theme-bg-deep);
  --jt26-surface: var(--jt-theme-surface);
  --jt26-surface-2: var(--jt-theme-surface-2);
  --jt26-card: var(--jt-theme-surface);
  --jt26-line: var(--jt-theme-line);
  --jt26-ink: var(--jt-theme-ink);
  --jt26-muted: var(--jt-theme-muted);
  --jt26-cyan: var(--jt-theme-brand);
  --jt26-mint: var(--jt-theme-mint);
  --jt26-blue: var(--jt-theme-blue);
  --jt26-violet: var(--jt-theme-violet);
  --jt26-shadow: var(--jt-theme-shadow);
  --jt26-soft-shadow: var(--jt-theme-shadow-soft);
}

html[data-theme],
html[data-theme] body,
html[data-theme] .jt-site,
html[data-theme] .jt-site main {
  background: var(--jt-theme-bg) !important;
  color: var(--jt-theme-ink) !important;
}

html[data-theme] .jt-site main :where(h1, h2, h3, h4, h5, h6) {
  color: var(--jt-theme-ink) !important;
}

html[data-theme] .jt-site main :where(p, .soft-text, .muted-text) {
  color: var(--jt-theme-muted) !important;
}

/* Brand labels and links retain enough contrast in both themes. */
html[data-theme] .jt-site main :where(.eyebrow, .detail-kicker, .jt26-eyebrow, .jt26-heading > span, .mk-kicker, .spx-kicker, .jt-update-kicker, .jt-update-section-head > span, .jt-update-split-copy > span) {
  color: var(--jt-theme-brand) !important;
}

html[data-theme] .jt-site main :where(.text-link, .card a:not(.btn), .product-card a:not(.btn), .jt26-market a, .jt26-program > a, .jt26-model-grid a) {
  color: var(--jt-theme-brand) !important;
}

/* Page and section surfaces. */
html[data-theme] .jt-site :where(
  .showroom-page, .el-page, .pg-page, .mk-page, .spx-page, .jtweb-page,
  .jt26-page, .jt26-catalog, .demo-page, .jt-update-page, .jt-gallery-page,
  .section, .page-section, .el-section, .mk-section, .spx-section,
  .jt26-section, .jt-update-section, .content-flow-section,
  .comparison-section, .media-band-section
) {
  background: var(--jt-theme-bg) !important;
  color: var(--jt-theme-ink) !important;
}

html[data-theme] .jt-site :where(
  .section.soft, .section.muted, .soft, .el-soft, .mk-soft,
  .spx-operations, .spx-markets, .jt26-section.is-soft,
  .dark, .dark-head, .mk-dark, .spx-dark, .jt26-flow-section
) {
  background: var(--jt-theme-bg-deep) !important;
  color: var(--jt-theme-ink) !important;
}

html[data-theme] .jt-site :where(
  .page-hero, .hero, .el-hero, .pg-hero, .mk-hero, .spx-hero,
  .jt26-hero, .jt26-catalog-hero, .jt-update-hero
) {
  background: var(--jt-theme-hero) !important;
  color: var(--jt-theme-ink) !important;
  border-color: var(--jt-theme-line) !important;
}

html[data-theme] .jt-site :where(
  .cta-band, .el-cta, .mk-cta, .spx-cta, .jt26-cta,
  .jt-update-cta, .jt26-continuity
) {
  background: var(--jt-theme-surface-2) !important;
  color: var(--jt-theme-ink) !important;
  border-color: var(--jt-theme-line) !important;
}

/* Cards, application panels and content blocks. */
html[data-theme] .jt-site :where(
  .card, .scenario-card, .problem-solution-grid > article, .flow-step,
  .info-box, .contact-card, .contact-mini, .mini-panel,
  .download-panel, .download-row, .desktop-download-panel, .mobile-download-zone,
  .selector-card, .track-selector-card, .project-card, .arch-card,
  .deep-card, .strong-card, .report-stack > div, .model-large,
  .package-row, .source-note, .download-note, .cloud-visual, .local-visual,
  .lan-visual, .arch-visual, .report-visual-upgrade, .mail-visual,
  .track-visual, .cz-board, .blueprint-grid, .hierarchy-board,
  .aggregation-focus, .archive-visual, .product-card, .visual-panel,
  .media-band, .spx-market-card, .spx-feature-grid article,
  .spx-rule-list article, .spx-metric-row article, .spx-install-cards article,
  .mk-flow article, .mk-grid article, .spx-console, .mk-code-visual,
  .el-market, .el-product-grid > a, .pg-card, .pg-security,
  .faq-list details, .compare-table-wrap, .choice-card, .mode-card,
  .preference-panel, .recovery-card, .chain-grid article, .operator-note,
  .contact-detail-item, .mini-matrix span, .mk-checks span,
  .jt26-market, .jt26-program, .jt26-model-grid article,
  .jt26-flow article, .jt26-continuity-list article, .jt26-product-card,
  .jt26-catalog-hero aside, .jt26-catalog-hero aside article
) {
  background: var(--jt-theme-surface) !important;
  color: var(--jt-theme-ink) !important;
  border-color: var(--jt-theme-line) !important;
  box-shadow: var(--jt-theme-shadow-soft) !important;
}

html[data-theme] .jt-site :where(
  .card p, .scenario-card p, .flow-step p, .info-box p,
  .download-row p, .model-large p, .arch-card p, .track-visual p,
  .product-card p, .choice-card p, .mode-card p, .recovery-card p,
  .chain-grid p, .operator-note, .jt26-continuity p
) {
  color: var(--jt-theme-muted) !important;
}

html[data-theme] .jt-site :where(
  .check-list li, .validation-list span, .validation-list li,
  .visual-list span, .wide-list li, .model-points li,
  .choice-card li, .mode-card li, .chain-grid article,
  .jt26-market li, .jt26-program li, .jt26-continuity-list span
) {
  color: var(--jt-theme-ink) !important;
}

html[data-theme] .jt-site :where(.visual-list span, .preference-panel p, .preference-panel small) {
  color: var(--jt-theme-muted) !important;
}

/* Small labels and links inherited several fixed cyan-on-dark colours from the
   first showroom layer. Keep their role but resolve them through theme tokens. */
html[data-theme] .jt-site :where(
  .icon-dot, .download-tag, .model-badge, .format-tag,
  .chain-grid span, .flow-step::before,
  .mk-heading > span, .mk-kicker, .mk-code-visual > span,
  .mk-live-note strong, .mk-cta span,
  .spx-heading > span, .spx-kicker, .spx-cta span,
  .spx-feature-grid b, .spx-metric-row strong,
  .spx-install-cards strong, .jt-update-teaser-copy > span
) {
  color: var(--jt-theme-brand) !important;
}

html[data-theme] .jt-site :where(.icon-dot, .download-tag, .model-badge, .format-tag, .chain-grid span) {
  background: color-mix(in srgb, var(--jt-theme-brand) 9%, var(--jt-theme-surface)) !important;
  border-color: color-mix(in srgb, var(--jt-theme-brand) 28%, var(--jt-theme-line)) !important;
}

html[data-theme] .jt-site :where(
  .card a:not(.btn), .download-row a:not(.btn), .contact-list a,
  .contact-mini a, .faq-list a, .mini-panel a:not(.btn)
) {
  color: var(--jt-theme-brand) !important;
}

html[data-theme] .contact-detail-item {
  background: var(--jt-theme-surface) !important;
  color: var(--jt-theme-ink) !important;
}
html[data-theme] .contact-detail-item small { color: var(--jt-theme-muted) !important; }
html[data-theme] .contact-detail-item strong { color: var(--jt-theme-ink) !important; }

html[data-theme] .mini-matrix span {
  background: var(--jt-theme-surface) !important;
  color: var(--jt-theme-ink) !important;
  border-color: var(--jt-theme-line) !important;
}

html[data-theme] .operator-note strong { color: var(--jt-theme-ink) !important; }

html[data-theme] .choice-card :where(.choice-card-head > span, dt),
html[data-theme] .mode-card strong {
  color: var(--jt-theme-ink) !important;
}
html[data-theme] .choice-card dd,
html[data-theme] .mode-card p {
  color: var(--jt-theme-muted) !important;
}
html[data-theme] .choice-card .choice-card-head a,
html[data-theme] .mode-card .mode-no,
html[data-theme] .spx-market-top span {
  color: var(--jt-theme-brand) !important;
}
html[data-theme] .choice-card .choice-card-head a,
html[data-theme] .mode-card .mode-no {
  background: color-mix(in srgb, var(--jt-theme-brand) 9%, var(--jt-theme-surface)) !important;
  border-color: color-mix(in srgb, var(--jt-theme-brand) 28%, var(--jt-theme-line)) !important;
}

html[data-theme] .mk-code-visual > strong,
html[data-theme] .spx-install-cards article strong {
  color: var(--jt-theme-ink) !important;
}
html[data-theme] .mk-code-visual > small,
html[data-theme] .spx-install-cards article span,
html[data-theme] .spx-metric-row span {
  color: var(--jt-theme-muted) !important;
}
html[data-theme] .mk-live-note {
  background: var(--jt-theme-surface-2) !important;
  color: var(--jt-theme-ink) !important;
  border-color: var(--jt-theme-line) !important;
}
html[data-theme] .mk-live-note p { color: var(--jt-theme-muted) !important; }

html[data-theme] .spx-install-cards article,
html[data-theme] .spx-rule-list > article > span {
  background: var(--jt-theme-surface) !important;
  color: var(--jt-theme-ink) !important;
  border-color: var(--jt-theme-line) !important;
}

html[data-theme] .demo-disclaimer strong {
  background: #744b00 !important;
  color: #fff !important;
}

/* Production continuity is a normal theme surface, never an isolated dark island. */
html[data-theme] .jt26-continuity h2,
html[data-theme] .jt26-continuity-list span {
  color: var(--jt-theme-ink) !important;
}

html[data-theme] .jt26-continuity-list article {
  background: var(--jt-theme-surface) !important;
}

/* Update page: replace its local fixed-dark palette. */
html[data-theme] .jt-update-page {
  --up-navy: var(--jt-theme-bg);
  --up-surface: var(--jt-theme-surface);
  --up-line: var(--jt-theme-line);
  --up-cyan: var(--jt-theme-brand);
  --up-green: var(--jt-theme-mint);
}

html[data-theme] .jt-site :where(
  .jt-update-page, .jt-update-proof, .jt-update-section,
  .jt-update-section:nth-of-type(even), .jt-update-communications,
  .jt-update-rus, .jt-update-teaser
) {
  background: var(--jt-theme-bg) !important;
  color: var(--jt-theme-ink) !important;
  border-color: var(--jt-theme-line) !important;
}

html[data-theme] .jt-site :where(
  .jt-update-proof > .container, .jt-update-proof-grid article,
  .jt-update-feature-grid article,
  .jt-update-communications-grid figure, .jt-update-visual,
  .jt-update-workflow article, .jt-update-steps li,
  .jt-update-teaser-media
) {
  background: var(--jt-theme-surface) !important;
  color: var(--jt-theme-ink) !important;
  border-color: var(--jt-theme-line) !important;
  box-shadow: var(--jt-theme-shadow-soft) !important;
}

html[data-theme] .jt-site :where(
  .jt-update-proof h2, .jt-update-proof-grid strong,
  .jt-update-feature-grid h3, .jt-update-communications-grid strong,
  .jt-update-workflow strong, .jt-update-steps li,
  .jt-update-teaser-copy h2, .jt-update-cta h2
) {
  color: var(--jt-theme-ink) !important;
}

html[data-theme] .jt-site :where(
  .jt-update-proof-grid span, .jt-update-section-head p,
  .jt-update-split-copy > p, .jt-update-feature-grid p,
  .jt-update-communications-grid figcaption span,
  .jt-update-communications-grid figcaption small,
  .jt-update-visual figcaption, .jt-update-workflow span,
  .jt-update-teaser-copy p, .jt-update-teaser-media figcaption,
  .jt-update-cta p
) {
  color: var(--jt-theme-muted) !important;
}

/* Gallery controls and dialog follow the selected theme. Image captions keep
   their deliberate dark media overlay for legibility over photographs. */
html[data-theme] .jt-gallery-page,
html[data-theme] .jt-gallery-page .page-hero {
  background: var(--jt-theme-bg) !important;
  color: var(--jt-theme-ink) !important;
}

html[data-theme] .jt-gallery-controls button,
html[data-theme] .jt-gallery-dialog,
html[data-theme] .jt-gallery-dialog-copy {
  background: var(--jt-theme-surface) !important;
  color: var(--jt-theme-ink) !important;
  border-color: var(--jt-theme-line) !important;
}

html[data-theme] .jt-gallery-dialog img {
  background: var(--jt-theme-bg-deep) !important;
}

html[data-theme] .jt-gallery-dialog-copy h2 { color: var(--jt-theme-ink) !important; }
html[data-theme] .jt-gallery-dialog-copy p { color: var(--jt-theme-muted) !important; }
html[data-theme] .jt-gallery-controls button:hover,
html[data-theme] .jt-gallery-controls button.is-active {
  background: var(--jt-theme-brand) !important;
  border-color: var(--jt-theme-brand) !important;
  color: #fff !important;
}
html[data-theme="dark"] .jt-gallery-controls button:hover,
html[data-theme="dark"] .jt-gallery-controls button.is-active {
  color: #06131a !important;
}

/* Interactive demo is part of the page and therefore obeys the same contract. */
html[data-theme] .demo-app,
html[data-theme] .demo-workspace,
html[data-theme] .demo-content {
  background: var(--jt-theme-bg) !important;
  color: var(--jt-theme-ink) !important;
}

html[data-theme] .demo-sidebar,
html[data-theme] .demo-topbar,
html[data-theme] .demo-stat-grid article,
html[data-theme] .demo-panel,
html[data-theme] .demo-table-wrap,
html[data-theme] .demo-card-grid article,
html[data-theme] .demo-notices article,
html[data-theme] .demo-settings,
html[data-theme] .demo-login,
html[data-theme] .demo-toast {
  background: var(--jt-theme-surface) !important;
  color: var(--jt-theme-ink) !important;
  border-color: var(--jt-theme-line) !important;
  box-shadow: var(--jt-theme-shadow-soft) !important;
}

html[data-theme] .demo-side-brand { border-color: var(--jt-theme-line) !important; }
html[data-theme] .demo-sidebar nav button,
html[data-theme] .demo-logout { color: var(--jt-theme-muted) !important; }
html[data-theme] .demo-sidebar nav button:hover,
html[data-theme] .demo-sidebar nav button.active {
  background: var(--jt-theme-surface-2) !important;
  color: var(--jt-theme-ink) !important;
}

html[data-theme] .demo-topbar h1,
html[data-theme] .demo-panel h2,
html[data-theme] .demo-view-head h2,
html[data-theme] .demo-stat-grid strong,
html[data-theme] .demo-donut li b { color: var(--jt-theme-ink) !important; }
html[data-theme] .demo-topbar small,
html[data-theme] .demo-stat-grid span,
html[data-theme] .demo-stat-grid small,
html[data-theme] .demo-card-grid span,
html[data-theme] .demo-notices span,
html[data-theme] .demo-settings p { color: var(--jt-theme-muted) !important; }
html[data-theme] .demo-track-list span,
html[data-theme] .demo-donut > div { background-color: var(--jt-theme-surface-3) !important; }
html[data-theme] .demo-donut > div::before { background: var(--jt-theme-surface) !important; }
html[data-theme] .demo-table-wrap th { background: var(--jt-theme-surface-2) !important; }
html[data-theme] .demo-table-wrap th,
html[data-theme] .demo-table-wrap td,
html[data-theme] .demo-settings label,
html[data-theme] .demo-topbar { border-color: var(--jt-theme-line) !important; }
html[data-theme] .demo-table-wrap td { color: var(--jt-theme-ink) !important; }

/* Tables and fields are contract surfaces too. */
html[data-theme] .jt-site :where(table, input, textarea, select) {
  background: var(--jt-theme-surface) !important;
  color: var(--jt-theme-ink) !important;
  border-color: var(--jt-theme-line) !important;
}
html[data-theme] .jt-site :where(th) {
  background: var(--jt-theme-surface-2) !important;
  color: var(--jt-theme-muted) !important;
}
html[data-theme] .jt-site :where(td) {
  color: var(--jt-theme-ink) !important;
  border-color: var(--jt-theme-line) !important;
}
html[data-theme] .jt-site :where(input::placeholder, textarea::placeholder) {
  color: var(--jt-theme-muted) !important;
}

/* Navigation and footer are always synchronized with the document theme. */
html[data-theme] .elite-header,
html[data-theme] .elite-footer,
html[data-theme] .elite-submenu,
html[data-theme] .elite-language-menu,
html[data-theme] .elite-nav {
  background: color-mix(in srgb, var(--jt-theme-surface) 94%, transparent) !important;
  color: var(--jt-theme-ink) !important;
  border-color: var(--jt-theme-line) !important;
}
html[data-theme] .elite-footer { background: var(--jt-theme-bg-deep) !important; }
html[data-theme] .elite-footer :where(h3, strong) { color: var(--jt-theme-ink) !important; }
html[data-theme] .elite-footer :where(p, a, .elite-footer-bottom) { color: var(--jt-theme-muted) !important; }

/* Intentional media overlays: white copy is required over moving photography. */
html[data-theme] .jt-site :where(
  .world-media figcaption, .gallery-item > div,
  .jt26-hero-media figcaption
) :where(h1, h2, h3, h4, p, span, strong),
html[data-theme] .jt-site .gallery-item > div :where(h2, h3, p),
html[data-theme] .jt-site .jt26-hero-media figcaption :where(strong, p) {
  color: #fff !important;
}

@media (prefers-reduced-motion: no-preference) {
  html[data-theme] body,
  html[data-theme] .elite-header,
  html[data-theme] .elite-footer {
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  }
}

@media (forced-colors: active) {
  html[data-theme] .jt-site * { box-shadow: none !important; }
}