/* 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: #b8a391 #211c19;
  --k-page: #211c19;
  --k-surface: #302721;
  --k-card: #3b3028;
  --k-ink: #f7eee4;
  --k-muted: #d5c2b1;
  --k-line: #806b59;
  --k-accent: #ffa16f;
}

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: #161311; }
html.dark .k-film::after {
  background: linear-gradient(90deg, rgb(12 9 8 / 62%), rgb(12 9 8 / 18%)),
    linear-gradient(0deg, rgb(12 9 8 / 92%), transparent 70%);
}
html.dark .k-button { background: #3b3028; color: var(--k-ink); border: 1px solid #ad917c; }
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: #29221e; }
html.dark .k-download { background: #493326; }
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: #d8bfa9; }
html.dark .k-process-step--proto,
html.dark .k-process-step--proto > span { color: var(--k-accent); }
html.dark .k-process-arrow { color: #bba28c; }
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: #171311; }
html.dark .k-route-track { stroke: #8e7663; }
html.dark .k-route-head { stroke: #ffa16f; }
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: #533928; border-color: #ab7753; }
html.dark .k-sample--2 { background: #64432e; border-color: #b27e58; }
html.dark .k-sample dl > div { border-color: #c3a58d80; }
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: #46382e; }
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: #a94020; color: #fff5e9; }

/* 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: #dfc7b1; 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: #543c2d; }
html:not(.dark) .k-local-system-label { color: #563a28; }
html:not(.dark) .k-local-system-label span,
html:not(.dark) .k-local-system-caption button { color: #6b452d; }
html:not(.dark) .k-local-orbit { border-color: #846b5888; }
html:not(.dark) .k-local-hub,
html:not(.dark) .k-local-node { color: var(--proto-paper); }

html.dark .k-download-links a { border-color: #ad8c73; }
html.dark .k-download-links small,
html.dark .k-alpha-note { color: #e3c3aa; }
html.dark .k-alpha-note a:hover { color: #fff8ef; }

html.dark .k-roaming-download,
html.dark .k-roaming-download[data-contrast] {
  background: #3d3028;
  color: var(--k-ink);
  border-color: #b59b85;
}
html.dark .k-roaming-download:hover,
html.dark .k-roaming-download[data-contrast]:hover { background: #5a4131; }
html.dark .k-mobile-download-dock { background: var(--k-page); border-color: var(--k-line); }