/* Final production palette. Component geometry, product media and data colors
   remain owned by their original stylesheets. */
html[data-visual-system] {
  --vs-paper: #fff;
  --vs-ink: #2a3543;
  --vs-muted: #526575;
  --vs-blue: #315f88;
  --vs-blue-hover: #254c70;
  --vs-line: #dbe3eb;
  --vs-control-line: #8b9bab;
  --vs-tint: #f4f6f8;
  --vs-selected: #eaf0f6;
  --vs-on-blue: #fff;
  color-scheme: light;
}
html[data-visual-system][data-theme='dark'] {
  --vs-paper: #17263b;
  --vs-ink: #e7edf7;
  --vs-muted: #b3c1d5;
  --vs-blue: #a6c8ef;
  --vs-blue-hover: #c4dcf7;
  --vs-line: #34465f;
  --vs-control-line: #8499b3;
  --vs-tint: #101b2b;
  --vs-selected: #203957;
  --vs-on-blue: #17263b;
  color-scheme: dark;
}

/* body.nkis-legacy defines its own variables, so map them here as well as on
   html. Green/red/amber financial and subscription state tokens are untouched. */
html[data-visual-system],
html[data-visual-system] body[data-visual-family] {
  --bg: var(--vs-paper);
  --bg-band: var(--vs-tint);
  --panel: var(--vs-paper);
  --surface: var(--vs-paper);
  --surface-soft: var(--vs-tint);
  --raised: var(--vs-tint);
  --ink: var(--vs-ink);
  --text: var(--vs-ink);
  --ink-soft: var(--vs-ink);
  --muted: var(--vs-muted);
  --muted-2: var(--vs-muted);
  --faint: var(--vs-muted);
  --line: var(--vs-line);
  --line-strong: var(--vs-control-line);
  --accent: var(--vs-blue);
  --blue: var(--vs-blue);
  --blue-dark: var(--vs-blue-hover);
  --blue-soft: var(--vs-selected);
  --tint: var(--vs-tint);
  --nk-paper: var(--vs-paper);
  --nk-ink: var(--vs-ink);
  --nk-muted: var(--vs-muted);
  --nk-line: var(--vs-line);
  --nk-tint: var(--vs-tint);
  --nk-green: var(--vs-blue);
  --pt-paper: var(--vs-paper);
  --pt-paper-deep: var(--vs-tint);
  --pt-surface: var(--vs-paper);
  --pt-ink: var(--vs-ink);
  --pt-ink-soft: var(--vs-ink);
  --pt-muted: var(--vs-muted);
  --pt-line: var(--vs-line);
  --pt-green: var(--vs-blue);
  --pt-green-bright: var(--vs-blue-hover);
  --pt-lime: var(--vs-selected);
  --pt-lime-soft: var(--vs-selected);
  --ng-ink: var(--vs-ink);
  --ng-muted: var(--vs-muted);
  --ng-line: var(--vs-line);
  --ng-paper: var(--vs-paper);
  --ng-accent: var(--vs-selected);
  --demo-accent: var(--vs-blue);
}

html[data-visual-system] body[data-visual-family] {
  background: var(--vs-paper);
  color: var(--vs-ink);
}
html[data-visual-system] :is(a, button, input, select, textarea, summary):focus-visible {
  outline-color: var(--vs-blue);
}

/* The legacy system uses literal colors for its reading and marketing chrome. */
body[data-visual-family='legacy'].nkis-legacy :is(h1, h2, h3, h4),
body[data-visual-family='legacy']
  :is(
    .nkis-masthead,
    .nkis-masthead a,
    .pt-language summary,
    .pt-mobile-menu summary,
    .ng-language summary,
    .menu-button,
    .pt-language-list a,
    .pt-mobile-panel a,
    .ng-language-list a
  ) {
  color: var(--vs-ink);
}
body[data-visual-family='legacy']
  :is(
    .pt-hero-lead,
    .hero-lead,
    .pt-section-heading p,
    .section-heading > p,
    .pt-feature-card p,
    .pt-step p,
    .feature-copy p,
    .pt-doc-section p,
    .document-card p,
    .document-card li,
    .ng-prose p,
    .ng-note p,
    .pt-trust-item span,
    .pt-proof-copy > p,
    .pt-doc-hero > p,
    .document-hero > p,
    .ng-lead,
    .pt-footer,
    .ng-footer,
    .site-footer,
    .document-footer,
    .tool-footer,
    .footer-inner p,
    .pt-footer-copy p,
    .ng-footer p,
    .pt-footer-links a,
    .footer-links a,
    .ng-footer a,
    .tool-footer a
  ) {
  color: var(--vs-muted);
}
body[data-visual-family='legacy']
  :is(
    .pt-header,
    .ng-header,
    .site-header,
    .tool-header,
    .document-header,
    .pt-main,
    .hero,
    .pt-feature-card,
    .pt-doc-card,
    .document-card,
    .ng-card,
    .pt-faq details,
    .faq-list details,
    .pt-language-list,
    .pt-mobile-panel,
    .ng-language-list,
    .pt-footer,
    .ng-footer,
    .site-footer,
    .document-footer,
    .tool-footer
  ) {
  background: var(--vs-paper);
  border-color: var(--vs-line);
}
body[data-visual-family='legacy']
  :is(.pt-cta-card, .cta-panel, .ng-answer, .ng-note, .ng-cta, .slarog-gallery) {
  background: var(--vs-tint);
  color: var(--vs-ink);
}
body[data-visual-family='legacy'] :is(.document-card a, .pt-doc-card a, .ng-prose a, .ng-cta > a) {
  color: var(--vs-blue);
}
body[data-visual-family='legacy'] :is(.pt-button-secondary, .button.ghost) {
  background: var(--vs-paper);
  color: var(--vs-blue);
  border-color: var(--vs-control-line);
}
body[data-visual-family='legacy'].nkis-legacy
  :is(
    .pt-button-primary,
    .button.primary,
    .pt-doc-card .pt-support-email,
    .ng-cta .pt-button,
    .ng-answer-actions .pt-button-primary
  ),
body[data-visual-family='document'] .button.primary {
  background: var(--vs-blue);
  color: var(--vs-on-blue);
  border-color: var(--vs-blue);
}
body[data-visual-family='legacy'].nkis-legacy :is(.pt-button-primary, .button.primary):hover {
  background: var(--vs-blue-hover);
  opacity: 1;
}
body[data-visual-family] .site-languages nav {
  background: var(--vs-paper);
  color: var(--vs-ink);
  border-color: var(--vs-line);
}
body[data-visual-family] .site-languages nav a:hover,
body[data-visual-family] .site-languages nav a[aria-current] {
  background: var(--vs-tint);
}

/* Frameclear: keep the video stage, canvases and comparison stamps unchanged. */
body[data-visual-family='frameclear']
  :is(.vr-brand, .vr-view-head, .vr-view-options, .vr-field, .vr-range, .frameclear-overview) {
  color: var(--vs-ink);
}
body[data-visual-family='frameclear']
  :is(
    .vr-brand span,
    .vr-private,
    .vr-help,
    .vr-meta,
    .vr-footer,
    .frameclear-overview p,
    .frameclear-overview figcaption
  ) {
  color: var(--vs-muted);
}
body[data-visual-family='frameclear']
  :is(.vr-viewer, .vr-controls, .vr-panel, .vr-presets button, select, input[type='number']) {
  background: var(--vs-paper);
  color: var(--vs-ink);
  border-color: var(--vs-control-line);
}
body[data-visual-family='frameclear'] :is(.vr-upload, input[readonly]) {
  background: var(--vs-tint);
  border-color: var(--vs-line);
  color: var(--vs-muted);
}
body[data-visual-family='frameclear'] :is(.vr-button, .vr-chip) {
  background: var(--vs-paper);
  color: var(--vs-blue);
  border-color: var(--vs-control-line);
}
body[data-visual-family='frameclear'] .vr-button.primary {
  background: var(--vs-blue);
  color: var(--vs-on-blue);
  border-color: var(--vs-blue);
}
body[data-visual-family='frameclear'] .vr-presets button.active {
  background: var(--vs-selected);
  color: var(--vs-blue);
  border-color: var(--vs-blue);
}
body[data-visual-family='frameclear'] :is(.vr-range output, .frameclear-overview a) {
  color: var(--vs-blue);
}
/* Retain the existing error, warning and estimate state semantics. */
body[data-visual-family='frameclear'] .vr-button.danger {
  color: #9c281f;
}

/* FX: --ice/--green/--red/--orange also encode graph and financial meaning;
   leave those tokens and chart descendants alone. Only UI chrome changes. */
body[data-visual-family='fx']
  :is(.site-header nav a, .site-footer a, .position-quick a, .text-link) {
  color: var(--vs-blue);
}
body[data-visual-family='fx']
  :is(.tool-main input:not([aria-invalid='true']), .tool-main select, .language-select) {
  background: var(--vs-paper);
  color: var(--vs-ink);
  border-color: var(--vs-control-line);
}

/* Standalone 404 and license documents may not have the legacy body class. */
body[data-visual-family='document'] {
  font-family: 'Helvetica Neue', 'Hiragino Sans', 'Yu Gothic', Arial, sans-serif;
  line-height: 1.8;
}
body[data-visual-family='document'] main a:not(.button) {
  color: var(--vs-blue);
}

/* Older product pages use literal gray text and white panels. Keep their
   reading surfaces usable when the shared dark theme is selected. */
html[data-theme='dark']
  body[data-visual-family='legacy'].nkis-legacy
  :is(h1, h2, h3, h4, summary, .pt-plan-note strong, .pt-footer-copy strong) {
  color: var(--vs-ink);
}
html[data-theme='dark']
  body[data-visual-family='legacy'].nkis-legacy
  :is(
    .eyebrow,
    .pt-eyebrow,
    .ng-kicker,
    .feature-label,
    .panel-label,
    .review-kicker,
    .plan-kicker,
    .hero-plan,
    .hero-plan a,
    .hero-meta span,
    figcaption,
    .muted-panel,
    .accent-panel,
    .benefit-list li,
    .plan-price span,
    .plan-card p,
    .plan-list li,
    .note-text,
    .cta-panel > p,
    .policy-tags span,
    .footer-brand,
    .pt-price,
    .pt-plan-note,
    .pt-independent,
    .pt-trust-item span,
    .pt-feature-card small,
    .pt-proof-note,
    .pt-safety-line p,
    .pt-search-item p,
    .pt-cta-card > p,
    .trust-copy p,
    .tool-promo-copy > p,
    .tool-promo-list span
  ) {
  color: var(--vs-muted);
}
html[data-theme='dark']
  body[data-visual-family='legacy'].nkis-legacy
  :is(
    .brand-text,
    .pt-language summary,
    .pt-mobile-menu summary,
    .ng-language summary,
    .pt-trust-strip,
    .pt-dark-band,
    .pt-mid-cta,
    .pt-plan-note,
    .pt-step,
    .plan-card,
    .plan-card.highlight,
    .trust-card,
    .tool-promo-panel,
    .pt-button-secondary,
    .button.ghost
  ) {
  background: var(--vs-paper);
  color: var(--vs-ink);
  border-color: var(--vs-line);
}
html[data-theme='dark']
  body[data-visual-family='legacy'].nkis-legacy
  :is(.pt-button-primary, .button.primary) {
  background: var(--vs-blue);
  color: var(--vs-on-blue);
}
html[data-theme='dark']
  body[data-visual-family='legacy'].nkis-legacy
  :is(.pt-button-primary, .button.primary):hover {
  background: var(--vs-blue-hover);
}
html[data-theme='dark'] body[data-visual-family='legacy'].nkis-legacy .pt-step::before {
  color: var(--vs-muted);
}
html[data-theme='dark']
  body[data-visual-family='legacy'].nkis-legacy
  :is(
    .muted-panel li,
    .accent-panel li,
    .faq-list details p,
    .pt-mid-cta-inner span,
    .pt-doc-aside a,
    .ng-toc a,
    .document-card dd
  ) {
  color: var(--vs-muted);
}
html[data-theme='dark']
  body[data-visual-family='legacy'].nkis-legacy
  :is(.pt-trust-item strong, .pt-mid-cta-inner strong, .tool-promo-list b) {
  color: var(--vs-ink);
}
html[data-theme='dark']
  body[data-visual-family='legacy'].nkis-legacy
  :is(.note-text, .pt-proof-note) {
  background: var(--vs-tint);
  color: var(--vs-muted);
}
html[data-theme='dark'] body[data-visual-family='legacy'].nkis-legacy .tool-promo-list li {
  background: var(--vs-paper);
  color: var(--vs-ink);
}
html[data-theme='dark'] body[data-visual-family='legacy'].nkis-legacy .tool-promo-list span {
  color: var(--vs-muted);
}
html[data-theme='dark'] body[data-visual-family='legacy']:has(#net-form) :is(input, select) {
  background: var(--vs-paper);
  color: var(--vs-ink);
  border-color: var(--vs-control-line);
}
html[data-theme='dark'] body[data-visual-family='legacy'] [data-calculate] {
  background: var(--vs-blue);
  color: var(--vs-on-blue);
}
html[data-theme='dark']
  body[data-visual-family='fx']
  :is(.input-privacy, .position-memory summary, .memory-status, .tool-more > a) {
  color: var(--vs-blue);
}