/* Theme roles reuse the portfolio's neutral tokens. The existing night palette
   remains the baseline; only the day palette overrides the page surroundings. */
:root{
 --theme-control-fill:color-mix(in srgb,var(--neutral-0) 10%,transparent);
 --theme-control-hover:color-mix(in srgb,var(--neutral-0) 16%,transparent);
 --theme-control-ink:var(--neutral-300);
 --theme-focus:var(--neutral-0);
}
.theme-actions{display:flex;align-items:center;gap:var(--gap-controls);margin-inline-start:auto;flex:none}
.theme-toggle{
 display:grid;place-items:center;flex:none;width:var(--button-medium-height);height:var(--button-medium-height);
 padding:0;border:0;border-radius:var(--radius-semantic-full);cursor:pointer;
 color:var(--theme-control-ink);background:var(--theme-control-fill);
}
.theme-toggle:hover{background:var(--theme-control-hover)}
html body .theme-toggle:focus-visible{outline:var(--stroke-focus-ring) solid var(--theme-focus);outline-offset:var(--gap-controls)}
.theme-toggle svg{width:var(--size-icon-small);height:var(--size-icon-small);fill:none;stroke:currentColor;stroke-width:var(--button-icon-stroke);stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .theme-moon{display:none}
[data-theme="light"] .theme-toggle .theme-sun{display:none}
[data-theme="light"] .theme-toggle .theme-moon{display:block}

html[data-theme="light"]:root{
 --theme-control-fill:var(--background-surface-muted);
 --theme-control-hover:var(--neutral-200);
 --theme-control-ink:var(--text-neutral-secondary);
 --theme-focus:var(--text-neutral-primary);
 background:var(--neutral-0);color-scheme:light;
}
html[data-theme="light"] body{
 --paper:var(--neutral-0);--map-paper:var(--neutral-0);
 --ink:var(--text-neutral-primary);--secondary:var(--text-neutral-secondary);--muted:var(--text-neutral-secondary);
 --line:var(--border-neutral-subtle);--surface:var(--background-surface-muted);
 --reader-accent:var(--text-neutral-primary);--studio-accent:var(--text-neutral-primary);
 --map-wire:var(--neutral-500);--studio-wire:var(--neutral-500);
 background:var(--paper);color:var(--ink);color-scheme:light;
}
html[data-theme="light"] .work-map{--map-wire-active:var(--text-neutral-primary)}
html[data-theme="light"] .site-header .contact{
 --button-fill:var(--surface);--button-text:var(--secondary);
 --button-hover:var(--neutral-200);--button-pressed:var(--neutral-300);
}
html[data-theme="light"] .branch-label.keyword-pill{background:var(--surface);color:var(--ink)}
html[data-theme="light"] .avatar-link{background:var(--surface)}
html[data-theme="light"] .avatar-link:hover{background:var(--neutral-200)}
html[data-theme="light"] .site-footer{--ink:var(--text-neutral-primary);--secondary:var(--text-neutral-secondary);--line:var(--border-neutral-subtle)}
html[data-theme="light"] body .footer-socials{
 --social-brand-background:var(--surface);--social-brand-foreground:var(--secondary);
 --color-background-action-secondary-hover:var(--neutral-200);
 --color-background-action-secondary-pressed:var(--neutral-300);
}
/* Keep project artwork, screen mockups and photo colours intact. */
html[data-theme="light"] body :is(.local-weather,.case-navigation,.case-footer__home,.spotify-stage-node,.spotify-guardrails,.studio-skill-list,.studio-focus-list,.studio-timeline-controls,.studio-milestone-icon) img{filter:brightness(0) opacity(.7)}
html[data-theme="light"] .studio-tool:is([data-tool="Codex"],[data-tool="GitHub"],[data-tool="Vercel"],[data-tool="Notion"],[data-tool="v0"]) img{filter:none}
html[data-theme="light"] .studio-stage img:is([src$="about-glyph4.svg"],[src$="about-glyph5.svg"],[src$="about-glyph.svg"],[src$="about-iadeOfficialVectorMark.svg"],[src$="about-uocNormalizedOpticalMark.svg"]),
html[data-theme="light"] .studio-stage[data-generic="true"] img{filter:none}
html[data-theme="light"] .studio-tool{background:var(--neutral-0)}
html[data-theme="light"] .studio-tool-level-dot{background:var(--neutral-300)}
html[data-theme="light"] .studio-tool-level-dot.is-filled{background:var(--neutral-600)}
html[data-theme="light"] .studio-panel-count{color:var(--secondary)}
html[data-theme="light"] .ui-image-view{background:var(--surface)}
html[data-theme="light"] body :is(a,button,[tabindex]):focus-visible{outline-color:var(--theme-focus)}
html[data-theme="light"] .skip-link{color:var(--ink)}
html[data-theme="light"] .question-bubble::before{background:var(--surface)}