/* Dark mode, switched on with <html data-theme="dark"> (see theme.js). It sets the
   design's colour variables plus a few of its own; the rules below replace the light
   colours that design.css and provsec.css hard-code. */

/* Polar night: the light palette at night, blue-slate and calm */
[data-theme=dark] {
  --background: #111b23; --surface: #17242e; --surface-cool: #142029;
  --ink: #e3ebf0; --body: #b9c7d1; --muted: #8597a5; --accent: #9cc0d8;
  --line: #273846; --ice: #1d2d39; --slate: #1b2a35; --frost: #1d2d39;
  --frame: #3c5263; --timeline: #33495a; --dot: #6d8798;
  --wash-mix: 26%; --facet: .07; --header: rgba(17,27,35,.85); --pill: rgba(23,36,46,.75);
}

[data-theme=dark] { color-scheme: dark; }
[data-theme=dark] body { background: var(--background); }

/* header */
[data-theme=dark] .site-header.scrolled { background: var(--header); box-shadow: 0 2px 16px #0006; }
[data-theme=dark] .navbar-links { background: var(--pill); box-shadow: 0 2px 12px #0005; }
[data-theme=dark] .navbar-links a:hover, [data-theme=dark] .navbar-links a.active { background: #ffffff12; }
[data-theme=dark] .brand-integrated { content: url("logo-dark.svg"); filter: drop-shadow(0 0 .7px #ffffff8c); }   /* keeps the puffin's dark back visible */

/* cards, portraits, timelines */
[data-theme=dark] .card { box-shadow: 0 2px 3px #0004; }
[data-theme=dark] .portrait-frame { background: var(--frame); }
[data-theme=dark] .member-photo { filter: brightness(.94); }
[data-theme=dark] #news-list, [data-theme=dark] .publication-scroll { scrollbar-color: var(--frame) transparent; }
[data-theme=dark] .news-feed { border-left-color: var(--timeline); }
[data-theme=dark] .news-year::before { border-color: var(--dot); }
[data-theme=dark] .news-item::before { background: var(--dot); }
[data-theme=dark] .news-text strong[style] { color: var(--accent) !important; }   /* PELICAN */
[data-theme=dark] .pub, [data-theme=dark] .talk { border-left-color: var(--timeline); }
[data-theme=dark] .course-meta { color: var(--muted); }
[data-theme=dark] .cispa-illustration { filter: brightness(.85) saturate(.9); }

/* link buttons: the same hues, as dark tinted ice with light lettering */
[data-theme=dark] .pub-link::before {
  background: linear-gradient(165deg, color-mix(in srgb, var(--wash) calc(var(--wash-mix) - 6%), var(--surface)) 25%,
                                      color-mix(in srgb, var(--wash) var(--wash-mix), var(--surface)));
}
[data-theme=dark] .pub-link::after { opacity: var(--facet); }
[data-theme=dark] .pub-link { --wash: #9d8fe0; color: #c9c0f2; }
[data-theme=dark] .pub-link[data-kind=eprint], [data-theme=dark] .pub-link[data-kind=arxiv] { --wash: #6fa6dc; color: #b5d4f2; }
[data-theme=dark] .pub-link[data-kind=slides] { --wash: #6cc093; color: #b3e2c6; }
[data-theme=dark] .pub-link[data-kind=video] { --wash: #e58a6e; color: #f3c2b2; }
[data-theme=dark] .pub-link[data-kind=code] { --wash: #d9b950; color: #ecdca2; }
[data-theme=dark] .pub-link[data-kind=cite] { --wash: #8a9aa8; color: #c6d0d8; }

/* dialog */
[data-theme=dark] dialog { box-shadow: 0 8px 60px #000a; }
[data-theme=dark] dialog::backdrop { background: #000a; }

/* light/dark toggle in the header */
.site-header .brand { margin-right: auto; }
.site-header nav { gap: 8px; }
.theme-toggle { display: grid; place-items: center; width: 40px; height: 40px; flex: none; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer; color: var(--ink);
  background: #ffffffa3; box-shadow: 0 2px 12px #243a4b0c; backdrop-filter: blur(16px); }
.theme-toggle:hover { background: #fff; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
[data-theme=dark] .theme-toggle { background: var(--pill); box-shadow: 0 2px 12px #0005; }
[data-theme=dark] .theme-toggle:hover { background: var(--ice); }
[data-theme=dark] .theme-toggle .icon-sun { display: block; }
[data-theme=dark] .theme-toggle .icon-moon { display: none; }