/* Zulia Shavaeva, personal site: dark theme (deep navy paper, cool white ink, electric cyan accent).
   Loaded after site.css. Overrides only, nothing here affects the light default. */

[data-theme="dark"]{
  --paper:oklch(15% 0.025 262);        /* #0a0f1c deep navy-black */
  --paper-2:oklch(20% 0.028 260);      /* raised surface */
  --ink:oklch(95% 0.008 230);          /* cool white text */
  --ink-2:oklch(82% 0.015 235);
  --mute:oklch(66% 0.02 240);
  --line:oklch(29% 0.03 255);
  --petrol:oklch(84% 0.13 200);        /* electric cyan: links, primary button */
  --petrol-deep:oklch(90% 0.11 198);   /* cyan hover */
  --petrol-soft:oklch(24% 0.05 215);   /* tinted cyan surface */
  --amber:oklch(84% 0.13 200);         /* secondary accent = same cyan, restraint */
  --amber-deep:oklch(84% 0.13 200);    /* eyebrow text */
  --amber-soft:oklch(23% 0.05 215);    /* decorative block */
  --shadow:oklch(0% 0 0/.6);
  --surface-invert:oklch(21% 0.04 250); /* replaces petrol-deep where it is a background */
  --fx-node:oklch(75% 0.05 230/.55);--fx-edge:oklch(70% 0.06 225/.22);--fx-hot:oklch(84% 0.13 200);--fx-grid:oklch(60% 0.04 240/.06);
  color-scheme:dark;
}

/* --- places site.css hard-codes a colour or inverts on petrol-deep --- */
[data-theme="dark"] .skip{color:var(--paper)}
[data-theme="dark"] .btn,[data-theme="dark"] .top nav a.btn{color:var(--paper)}
[data-theme="dark"] .btn:hover,[data-theme="dark"] .top nav a.btn:hover{color:var(--paper)}
[data-theme="dark"] .btn.ghost{color:var(--petrol);border-color:oklch(40% 0.06 220)}
[data-theme="dark"] .btn.ghost:hover{background:var(--petrol-soft);color:var(--petrol-deep)}
[data-theme="dark"] .btn.amber:hover{background:var(--petrol-deep)}
[data-theme="dark"] .hero .pic img{box-shadow:0 30px 60px -30px var(--shadow)}
[data-theme="dark"] .hero .pic .cap{box-shadow:0 10px 30px -18px var(--shadow)}
[data-theme="dark"] .help a:first-child{background:var(--surface-invert);color:var(--ink)}
[data-theme="dark"] .help a:first-child h3{color:var(--ink)}
[data-theme="dark"] .help a:first-child p{color:var(--ink-2)}
[data-theme="dark"] .help a:first-child:hover{background:oklch(28% 0.035 45)}
[data-theme="dark"] .help a:first-child:hover h3{color:var(--ink)}
[data-theme="dark"] .pages a:hover .arr{color:var(--paper)}
[data-theme="dark"] .band{background:var(--surface-invert);color:var(--ink)}
[data-theme="dark"] .band h2{color:var(--ink)}
[data-theme="dark"] .band p{color:var(--ink-2)}
[data-theme="dark"] .band .btn.ghost{color:var(--ink);border-color:oklch(45% 0.05 230)}
[data-theme="dark"] .band .btn.ghost:hover{background:oklch(28% 0.05 240);color:var(--ink)}
/* images read a little hot on charcoal */
[data-theme="dark"] .hero .pic img,[data-theme="dark"] .about .pic img,[data-theme="dark"] .talks .pic img{filter:brightness(.94) saturate(.96)}

/* --- theme toggle button, sits in .top nav --- */
.theme-btn{
  display:inline-flex;align-items:center;gap:7px;
  background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:7px 13px 7px 11px;font:600 14px/1 var(--sans);color:var(--ink-2);
  cursor:pointer;-webkit-appearance:none;appearance:none}
.theme-btn:hover{color:var(--petrol-deep);border-color:var(--petrol)}
.theme-btn:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
.theme-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-btn .sun{display:none}.theme-btn .moon{display:block}
[data-theme="dark"] .theme-btn .sun{display:block}[data-theme="dark"] .theme-btn .moon{display:none}
.theme-btn .lab{letter-spacing:.02em}
@media (max-width:900px){
  .theme-btn{margin:10px clamp(18px,4vw,40px) 0;justify-content:center;border-radius:12px;padding:12px}
}

/* --- colour transition on theme change (colour properties only) --- */
@media not (prefers-reduced-motion:reduce){
  body,.top,.top nav,.brand,.menu-btn,.theme-btn,h1,h2,h3,p,a,
  .facts,.facts div,.facts b,.facts span,.help,.help a,.help h3,.help .n,.help .go,
  .pages a,.pages b,.pages .d,.pages .arr,.band,.band p,.talk-list,.talk-list li,
  .talk-list span,.hero .pic .cap,.hero .pic::before,footer,footer a,.eyebrow,.sec-head p{
    transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
  .btn{transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .25s var(--ease)}
  .pages a:hover .arr{transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
}

/* --- hero canvas (signature moment). Keeps the lead from patching site.css. --- */
.hero{position:relative}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}