/* vko.media dark theme. Load after site.css (and after the <style> on cv.html).
   Follows the phone by default; theme.js sets <html data-theme="light|dark"> for a manual choice.
   Both blocks below hold the same rules: the first for the system setting, the second for the toggle.
   Screen only, so printing the CV stays on white paper. Nothing here touches filters or opacity of photos (HDR safe). */

/* theme toggle in the nav pill, same look as the other pill buttons */
.pill .theme-btn { padding: 8px 12px; }
.pill .theme-btn svg, .bar .theme-btn svg { display: block; }
.bar .theme-btn { padding: 8px 12px; }
body:has(> main.page) .bar a, body:has(> main.page) .bar button { white-space: nowrap; }
@media (max-width: 420px) {
  body:has(> main.page) .bar { padding-inline: 12px; }
  body:has(> main.page) .bar > span { gap: 6px !important; }
  body:has(> main.page) .bar a, body:has(> main.page) .bar button { padding-inline: 10px; }
}
@media (hover: hover) and (pointer: fine) { .pill .theme-btn:hover { background: rgb(13 13 13 / .07); } }

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0B0C;
    --surface: #19191B;
    --ink: #F2F2F2;
    --ink-2: #C7C7C7;
    --muted: #9C9C9C;
    --faint: rgb(242 242 242 / .12);
    --accent: oklch(0.72 0.18 38);
    --accent-ink: oklch(0.8 0.14 45);
    --on-accent: #0D0D0D;
    --glass-bg: rgb(26 26 28 / .62);
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) .glass { background: var(--glass-bg); border-color: rgb(255 255 255 / .09); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), inset 0 -1px 0 rgb(0 0 0 / .2), 0 8px 24px rgb(0 0 0 / .45); }
  :root:not([data-theme="light"]) .btn .ico, :root:not([data-theme="light"]) .pill .hello { color: var(--on-accent); }
  :root:not([data-theme="light"]) .icon-btn { background: rgb(26 26 28 / .85); }
  :root:not([data-theme="light"]) .chip-btn[aria-pressed="true"] sup { color: oklch(0.58 0.19 38); }
  :root:not([data-theme="light"]) .cursor.on-dark .tag, :root:not([data-theme="light"]) .hero .btn, :root:not([data-theme="light"]) .cz-play, :root:not([data-theme="light"]) .cz-next .go { color: #0D0D0D; }
  :root:not([data-theme="light"]) .cursor.link .dot { background: rgb(242 242 242 / .16); }
  :root:not([data-theme="light"]) .manifesto .w { color: rgb(242 242 242 / .16); }
  :root:not([data-theme="light"]) .manifesto .w.on { color: var(--ink); }
  :root:not([data-theme="light"]) dialog.sheet-d[open]::backdrop { background: rgb(0 0 0 / .6); }
  :root:not([data-theme="light"]) .case-bar { background: rgb(11 11 12 / .8); }
  :root:not([data-theme="light"]) .case .case-bar { background: none; }
  :root:not([data-theme="light"]) .case.scrolled .case-bar { background: rgb(11 11 12 / .96); }
  :root:not([data-theme="light"]) .play.solid { background: rgb(20 20 22 / .88); color: var(--ink); }
  :root:not([data-theme="light"]) .case[style*="--ac: var(--ink)"] .cz-hero, :root:not([data-theme="light"]) .case[style*="--ac: var(--ink)"] .cz-play i { background: #26262A; }
  :root:not([data-theme="light"]) .case[style*="--ac: var(--ink)"] .cz-hero::after { background: linear-gradient(180deg, rgb(0 0 0 / .25) 0%, rgb(0 0 0 / 0) 28%, rgb(0 0 0 / 0) 48%, #000 100%); }
  :root:not([data-theme="light"]) .cz-next[style*="--nac:var(--ink)"] { background: #26262A; }
  :root:not([data-theme="light"]) .cz-stat b, :root:not([data-theme="light"]) .st-n { color: color-mix(in oklab, var(--ac) 40%, #F2F2F2); color: oklch(from var(--ac) max(l, .8) min(c, .16) h); }
  :root:not([data-theme="light"]) .cz-did li::before { background: color-mix(in oklab, var(--ac) 40%, #F2F2F2); background: oklch(from var(--ac) max(l, .8) min(c, .16) h); }
  :root:not([data-theme="light"]) .case-next:hover span { color: rgb(11 11 12 / .6); }
  :root:not([data-theme="light"]) .chart [fill="#0D0D0D"] { fill: var(--ink); }
  :root:not([data-theme="light"]) .chart [fill="#6B6B6B"] { fill: var(--muted); }
  :root:not([data-theme="light"]) .chart [fill="#3A3A3A"] { fill: var(--ink-2); }
  :root:not([data-theme="light"]) .chart rect[fill="#fff"] { fill: #232326; }
  :root:not([data-theme="light"]) .chart [stroke="rgb(13 13 13 / .12)"] { stroke: rgb(242 242 242 / .16); }
  :root:not([data-theme="light"]) .chart [stroke="rgb(13 13 13 / .08)"] { stroke: rgb(242 242 242 / .1); }
  :root:not([data-theme="light"]) .chart text[fill="#0E7490"], :root:not([data-theme="light"]) .chart circle[fill="#0E7490"], :root:not([data-theme="light"]) .chart marker path { fill: #22D3EE; }
  :root:not([data-theme="light"]) .chart [stroke="#0E7490"] { stroke: #22D3EE; }
  :root:not([data-theme="light"]):has(> body > main.page), :root:not([data-theme="light"]) body:has(> main.page) { background: #0B0B0C; }
  :root:not([data-theme="light"]) body:has(> main.page) .bar { background: rgb(11 11 12 / .85); }
  :root:not([data-theme="light"]) body:has(> main.page) .bar a, :root:not([data-theme="light"]) body:has(> main.page) .bar button { background: #1E1E21; color: var(--ink); }
  :root:not([data-theme="light"]) body:has(> main.page) .bar .primary { background: var(--ink); color: #0D0D0D; }
  :root:not([data-theme="light"]) body:has(> main.page) .page { background: #151517; box-shadow: 0 0 0 1px rgb(255 255 255 / .06), 0 8px 32px rgb(0 0 0 / .5); }
  :root:not([data-theme="light"]) body:has(> main.page) .tags span { background: #26262A; }
  :root:not([data-theme="light"]) body:has(> main.page) h2 { color: var(--accent); }
  @media (hover: hover) and (pointer: fine) {
    :root:not([data-theme="light"]) .btn:hover { background: #FFFFFF; }
    :root:not([data-theme="light"]) .btn.ghost:hover { background: #26262A; }
    :root:not([data-theme="light"]) .icon-btn:hover { background: #2A2A2D; }
    :root:not([data-theme="light"]) .pill a:not([aria-current="true"]):not(.hello):hover, :root:not([data-theme="light"]) .pill .theme-btn:hover { background: rgb(242 242 242 / .1); }
    :root:not([data-theme="light"]) .item > h3 > button:hover .pm { color: var(--on-accent); }
    :root:not([data-theme="light"]) body:has(> main.page) .bar a:hover, :root:not([data-theme="light"]) body:has(> main.page) .bar button:not(.primary):hover { background: #2A2A2D; }
    :root:not([data-theme="light"]) body:has(> main.page) .bar .primary:hover { background: #FFFFFF; }
  }
}

@media screen {
  :root[data-theme="dark"] {
    --bg: #0B0B0C;
    --surface: #19191B;
    --ink: #F2F2F2;
    --ink-2: #C7C7C7;
    --muted: #9C9C9C;
    --faint: rgb(242 242 242 / .12);
    --accent: oklch(0.72 0.18 38);
    --accent-ink: oklch(0.8 0.14 45);
    --on-accent: #0D0D0D;
    --glass-bg: rgb(26 26 28 / .62);
    color-scheme: dark;
  }
  :root[data-theme="dark"] .glass { background: var(--glass-bg); border-color: rgb(255 255 255 / .09); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), inset 0 -1px 0 rgb(0 0 0 / .2), 0 8px 24px rgb(0 0 0 / .45); }
  :root[data-theme="dark"] .btn .ico, :root[data-theme="dark"] .pill .hello { color: var(--on-accent); }
  :root[data-theme="dark"] .icon-btn { background: rgb(26 26 28 / .85); }
  :root[data-theme="dark"] .chip-btn[aria-pressed="true"] sup { color: oklch(0.58 0.19 38); }
  :root[data-theme="dark"] .cursor.on-dark .tag, :root[data-theme="dark"] .hero .btn, :root[data-theme="dark"] .cz-play, :root[data-theme="dark"] .cz-next .go { color: #0D0D0D; }
  :root[data-theme="dark"] .cursor.link .dot { background: rgb(242 242 242 / .16); }
  :root[data-theme="dark"] .manifesto .w { color: rgb(242 242 242 / .16); }
  :root[data-theme="dark"] .manifesto .w.on { color: var(--ink); }
  :root[data-theme="dark"] dialog.sheet-d[open]::backdrop { background: rgb(0 0 0 / .6); }
  :root[data-theme="dark"] .case-bar { background: rgb(11 11 12 / .8); }
  :root[data-theme="dark"] .case .case-bar { background: none; }
  :root[data-theme="dark"] .case.scrolled .case-bar { background: rgb(11 11 12 / .96); }
  :root[data-theme="dark"] .play.solid { background: rgb(20 20 22 / .88); color: var(--ink); }
  :root[data-theme="dark"] .case[style*="--ac: var(--ink)"] .cz-hero, :root[data-theme="dark"] .case[style*="--ac: var(--ink)"] .cz-play i { background: #26262A; }
  :root[data-theme="dark"] .case[style*="--ac: var(--ink)"] .cz-hero::after { background: linear-gradient(180deg, rgb(0 0 0 / .25) 0%, rgb(0 0 0 / 0) 28%, rgb(0 0 0 / 0) 48%, #000 100%); }
  :root[data-theme="dark"] .cz-next[style*="--nac:var(--ink)"] { background: #26262A; }
  :root[data-theme="dark"] .cz-stat b, :root[data-theme="dark"] .st-n { color: color-mix(in oklab, var(--ac) 40%, #F2F2F2); color: oklch(from var(--ac) max(l, .8) min(c, .16) h); }
  :root[data-theme="dark"] .cz-did li::before { background: color-mix(in oklab, var(--ac) 40%, #F2F2F2); background: oklch(from var(--ac) max(l, .8) min(c, .16) h); }
  :root[data-theme="dark"] .case-next:hover span { color: rgb(11 11 12 / .6); }
  :root[data-theme="dark"] .chart [fill="#0D0D0D"] { fill: var(--ink); }
  :root[data-theme="dark"] .chart [fill="#6B6B6B"] { fill: var(--muted); }
  :root[data-theme="dark"] .chart [fill="#3A3A3A"] { fill: var(--ink-2); }
  :root[data-theme="dark"] .chart rect[fill="#fff"] { fill: #232326; }
  :root[data-theme="dark"] .chart [stroke="rgb(13 13 13 / .12)"] { stroke: rgb(242 242 242 / .16); }
  :root[data-theme="dark"] .chart [stroke="rgb(13 13 13 / .08)"] { stroke: rgb(242 242 242 / .1); }
  :root[data-theme="dark"] .chart text[fill="#0E7490"], :root[data-theme="dark"] .chart circle[fill="#0E7490"], :root[data-theme="dark"] .chart marker path { fill: #22D3EE; }
  :root[data-theme="dark"] .chart [stroke="#0E7490"] { stroke: #22D3EE; }
  :root[data-theme="dark"]:has(> body > main.page), :root[data-theme="dark"] body:has(> main.page) { background: #0B0B0C; }
  :root[data-theme="dark"] body:has(> main.page) .bar { background: rgb(11 11 12 / .85); }
  :root[data-theme="dark"] body:has(> main.page) .bar a, :root[data-theme="dark"] body:has(> main.page) .bar button { background: #1E1E21; color: var(--ink); }
  :root[data-theme="dark"] body:has(> main.page) .bar .primary { background: var(--ink); color: #0D0D0D; }
  :root[data-theme="dark"] body:has(> main.page) .page { background: #151517; box-shadow: 0 0 0 1px rgb(255 255 255 / .06), 0 8px 32px rgb(0 0 0 / .5); }
  :root[data-theme="dark"] body:has(> main.page) .tags span { background: #26262A; }
  :root[data-theme="dark"] body:has(> main.page) h2 { color: var(--accent); }
  @media (hover: hover) and (pointer: fine) {
    :root[data-theme="dark"] .btn:hover { background: #FFFFFF; }
    :root[data-theme="dark"] .btn.ghost:hover { background: #26262A; }
    :root[data-theme="dark"] .icon-btn:hover { background: #2A2A2D; }
    :root[data-theme="dark"] .pill a:not([aria-current="true"]):not(.hello):hover, :root[data-theme="dark"] .pill .theme-btn:hover { background: rgb(242 242 242 / .1); }
    :root[data-theme="dark"] .item > h3 > button:hover .pm { color: var(--on-accent); }
    :root[data-theme="dark"] body:has(> main.page) .bar a:hover, :root[data-theme="dark"] body:has(> main.page) .bar button:not(.primary):hover { background: #2A2A2D; }
    :root[data-theme="dark"] body:has(> main.page) .bar .primary:hover { background: #FFFFFF; }
  }
}