/* The kinetic homepage shares the site theme switch; its cinematic sections keep
   their own color roles so the film, diagrams, and text remain legible. */
html.dark {
  color-scheme: dark;
  scrollbar-color: #9ea2ab #1b1c1f;
  --k-page: #1b1c1f;
  --k-surface: #26272b;
  --k-card: #2e3035;
  --k-ink: #ecedef;
  --k-muted: #bfc1c7;
  --k-line: #656974;
  --k-accent: var(--a-kinetic-dark-accent);
}

html.dark body { background: var(--k-page); color: var(--k-ink); }
html.dark .skip-link { background: var(--k-card); color: var(--k-ink); }
html.dark ::selection { background: var(--k-accent); color: var(--k-page); }

/* The hero still belongs to the film. Its overlay and action respond to theme. */
html.dark .k-hero { background: #121315; }
html.dark .k-film::after {
  background: linear-gradient(90deg, rgb(9 10 11 / 62%), rgb(9 10 11 / 18%)),
    linear-gradient(0deg, rgb(9 10 11 / 92%), transparent 70%);
}
html.dark .k-button { background: #2e3035; color: var(--k-ink); border: 1px solid #8d929c; }
html.dark .k-button:hover { background: var(--k-accent); color: var(--k-page); }

/* Intro, product narrative, case study, FAQ, and download are paper in light
   mode and warm charcoal in dark mode. */
html.dark .k-apps { background: var(--k-page); }
html.dark .k-case { background: #212326; }
html.dark .k-download { background: #34363b; }
html.dark .k-caption,
html.dark .k-chapters-intro > p:not(.k-caption),
html.dark .k-chapter-label,
html.dark .k-chapter > p,
html.dark .k-case-outcomes p,
html.dark .k-faq details p { color: var(--k-muted); }
html.dark .k-text-link { border-color: var(--k-ink); }
html.dark .k-text-link:hover { color: var(--k-accent); }
html.dark .k-chapter,
html.dark .k-faq details { border-color: var(--k-line); }

/* Process and app examples use actual dark surfaces, rather than retaining
   pale cards on a dark page. */
html.dark .k-process-step { color: #bcbfc5; }
html.dark .k-process-step--proto,
html.dark .k-process-step--proto > span { color: var(--k-accent); }
html.dark .k-process-arrow { color: #9da1aa; }
html.dark .k-prompt,
html.dark .k-memory span { background: var(--k-card); color: var(--k-ink); }
html.dark .k-art-line { background: var(--k-line); }
html.dark .k-mini-app { background: var(--k-surface); border-color: var(--k-line); }
html.dark .k-mini-app > div:first-child { border-color: var(--k-line); }
html.dark .k-mini-app > div:first-child > span:last-child,
html.dark .k-mini-columns,
html.dark .k-build-art > small,
html.dark .k-approval div > span { color: var(--k-muted); }
html.dark .k-mini-columns b { background: var(--k-card); color: var(--k-ink); }
html.dark .k-approval { border-color: var(--k-line); }
html.dark .k-memory .k-memory-next { background: var(--k-accent); color: var(--k-page); }

html.dark .k-network-core { background: #131315; }
html.dark .k-route-track { stroke: #707581; }
html.dark .k-route-head { stroke: var(--a-kinetic-dark-accent); }
html.dark .k-network-nodes li { background: var(--k-card); border-color: var(--k-line); }
html.dark .k-network-nodes span,
html.dark .k-network-caption { color: var(--k-muted); }
html.dark .k-network-caption button,
html.dark .k-network-caption .k-diagram-toggle:hover,
html.dark .k-network-caption .k-diagram-toggle:focus-visible { color: var(--k-accent); }


html.dark .k-apps-heading > p,
html.dark .k-apps-foot p { color: var(--k-muted); }
html.dark .k-sample { background: var(--k-card); border-color: var(--k-line); color: var(--k-ink); }
html.dark .k-sample--1 { background: #393c42; border-color: #767b88; }
html.dark .k-sample--2 { background: #44474e; border-color: #7c828e; }
html.dark .k-sample dl > div { border-color: #a2a6ae80; }
html.dark .k-sample-review > span,
html.dark .k-apps-foot a:hover { color: var(--k-accent); }
html.dark .k-apps-foot a { border-color: var(--k-line); }

html.dark .k-case-capture { background: #36383e; }
html.dark .k-case-outcomes strong { color: var(--k-ink); }

/* Brand color is deeper under dark mode while preserving readable text. */
html.dark .k-statement { background: var(--a-kinetic-dark-statement); color: #f3f4f5; }

/* In light mode this section becomes clay; the existing dark nodes remain the
   focus. In dark mode it returns to its original charcoal setting. */
html:not(.dark) .k-local { background: #c4c6cc; color: var(--proto-ink); }
html:not(.dark) .k-local .k-caption,
html:not(.dark) .k-local-copy > p,
html:not(.dark) .k-local-system-caption { color: #3c3f45; }
html:not(.dark) .k-local-system-label { color: #3b3d43; }
html:not(.dark) .k-local-system-label span,
html:not(.dark) .k-local-system-caption button { color: #474a51; }
html:not(.dark) .k-local-orbit { border-color: #666b7688; }
html:not(.dark) .k-local-hub,
html:not(.dark) .k-local-node { color: var(--proto-paper); }

html.dark .k-download-links a { border-color: #888d98; }
html.dark .k-download-links small,
html.dark .k-alpha-note { color: #c3c5ca; }
html.dark .k-alpha-note a:hover { color: #f6f7f8; }

html.dark .k-roaming-download,
html.dark .k-roaming-actions[data-contrast] .k-roaming-download {
  background: #2f3136;
  color: var(--k-ink);
  border-color: #969aa4;
}
html.dark .k-roaming-download:hover,
html.dark .k-roaming-actions[data-contrast] .k-roaming-download:hover { background: #41444a; }
html.dark .k-roaming-download:active,
html.dark .k-roaming-actions[data-contrast] .k-roaming-download:active { background: #4a4e56; }
html.dark .k-mobile-download-dock { background: var(--k-page); border-color: var(--k-line); }