/* Shared light/dark mode for every film.ki page except the homepage, which owns its theme styles. */

html[data-theme="light"] {
  color-scheme: light;
  --black: #f1efe8;
  --ink: #f1efe8;
  --panel: #fffdf8;
  --paper: #080808;
  --bg: #f1efe8;
  --surface: #fffdf8;
  --text: #080808;
  --muted: #605f5a;
  --quiet: #706d67;
  --line: rgba(8, 8, 8, .14);
  --line-strong: rgba(8, 8, 8, .3);
  --soft-line: rgba(8, 8, 8, .08);
}

html[data-theme="light"] body { background: var(--black); color: var(--paper); }
html[data-theme="light"] .noise { opacity: .025; mix-blend-mode: multiply; }

.topbar .brand-lockup { display: flex; align-items: center; gap: 1rem; }
.topbar .preview-badge {
  padding: .45rem .65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font: 650 .62rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}

.topbar > .theme-toggle,
.theme-toggle--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.45rem;
  height: 2.45rem;
  padding: 0;
  border: 1px solid rgba(8, 8, 8, .32);
  border-radius: 50%;
  background: transparent;
  color: #080808;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.topbar > .theme-toggle { margin-left: auto; margin-right: clamp(.8rem, 2vw, 1.6rem); }
.theme-toggle__icon { width: .82rem; height: .82rem; border: 1px solid currentColor; border-radius: 50%; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.theme-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.theme-toggle:hover,
.theme-toggle:focus-visible { border-color: #ff4a30; background: transparent; outline: 0; }

html[data-theme="light"] .topbar,
html[data-theme="light"] .topbar.scrolled {
  background: #080808;
  border-color: rgba(241, 239, 232, .16);
}

html[data-theme="light"] .topbar .preview-badge,
html[data-theme="light"] .topbar .nav a { color: #c2c0b9; }
html[data-theme="light"] .topbar .preview-badge { border-color: rgba(241, 239, 232, .28); }
html[data-theme="light"] .topbar .nav .join-link { border-color: #f1efe8; color: #f1efe8; }
html[data-theme="light"] .topbar .nav a:hover,
html[data-theme="light"] .topbar .nav a:focus-visible { color: #ff4a30; }
html[data-theme="light"] .topbar > .theme-toggle,
html[data-theme="light"] .topbar .menu-toggle {
  border-color: rgba(241, 239, 232, .56);
  background: transparent;
  color: #f1efe8;
}

html[data-theme="light"] .topbar > .theme-toggle:hover,
html[data-theme="light"] .topbar > .theme-toggle:focus-visible { border-color: #ff4a30; background: transparent; }

html[data-theme="light"] footer,
html[data-theme="light"] body > footer {
  background: #080808;
  border-color: rgba(241, 239, 232, .16);
  color: #c2c0b9;
}
html[data-theme="light"] footer a,
html[data-theme="light"] footer .footer-menu,
html[data-theme="light"] footer .footer-copy,
html[data-theme="light"] footer .footer-socials a { color: #c2c0b9; }
html[data-theme="light"] footer a:hover,
html[data-theme="light"] footer a:focus-visible { color: #f1efe8; }

/* Editorial articles retain their reading hierarchy instead of inheriting pale dark-mode copy. */
html[data-theme="light"] .dek,
html[data-theme="light"] article .lead,
html[data-theme="light"] .pullquote,
html[data-theme="light"] .final-lines p,
html[data-theme="light"] .checklist li,
html[data-theme="light"] .sources a,
html[data-theme="light"] .sources strong,
html[data-theme="light"] .transparency,
html[data-theme="light"] .transparency strong,
html[data-theme="light"] .image-evidence figcaption strong { color: #080808; }

html[data-theme="light"] .dek { color: #4f4d48; }
html[data-theme="light"] .article-card p,
html[data-theme="light"] .deck { color: #5f5d57; }

/* Pages with dark-mode copy colours hard-coded in their local stylesheet need an explicit light-mode reading colour. */
html[data-theme="light"] .term-definition,
html[data-theme="light"] .note-copy p,
html[data-theme="light"] .copy p,
html[data-theme="light"] .answer p,
html[data-theme="light"] .article p,
html[data-theme="light"] .press-contact-copy > p,
html[data-theme="light"] .boilerplate-copy p { color: #4f4d48; }

html[data-theme="light"] article h3,
html[data-theme="light"] .term-title em,
html[data-theme="light"] .term-toggle,
html[data-theme="light"] .hero-meta { color: #605f5a; }

html[data-theme="light"] .note-copy a { border-color: #080808; color: #080808; }

/* The team cards intentionally remain dark in light mode, so their names keep the brand white. */
html[data-theme="light"] .role-card__name,
html[data-theme="light"] .role-card__more,
html[data-theme="light"] .role-links a { color: #f1efe8; }
html[data-theme="light"] .role-links a { border-color: #f1efe8; }

@media (max-width: 1050px) {
  html[data-theme="light"] .topbar.menu-open { background: #080808; border-color: rgba(241, 239, 232, .16); }
  html[data-theme="light"] .topbar .nav {
    background: #080808;
    border-color: rgba(241, 239, 232, .16);
  }
  html[data-theme="light"] .topbar .nav a,
  html[data-theme="light"] .topbar .nav a:not(.back),
  html[data-theme="light"] .topbar .nav a:not(.back-link),
  html[data-theme="light"] .topbar .nav a:not(.join-link) {
    border-bottom-color: rgba(241, 239, 232, .16);
    color: #f1efe8;
  }
}

/* A useful but non-standard fallback for the otherwise minimal 404 page. */
.theme-toggle--fallback { position: fixed; top: 1rem; right: 1rem; z-index: 10; }
html[data-theme="dark"] .theme-toggle--fallback { border-color: rgba(241, 239, 232, .56); color: #f1efe8; }