/* Loaded after atelier.css. Theme tokens describe page surfaces, never image filters. */
:root{--paper:#efeee9;--ink:#182226;--muted:#53636a;--soft:#e1e4df;--line:#bec7c7;--jade:#216452;--brass:#be9571}
:root[data-theme=light]{color-scheme:light}
:root[data-theme=dark]{color-scheme:dark;--paper:#101316;--ink:#f0f0eb;--muted:#b2bdbf;--line:#465054;--soft:#1b2226;--jade:#b4e9d6;--blue:var(--jade);--brass:#d6ad89;background:var(--paper);color:var(--ink)}
.a-theme-system{min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:24px;margin-top:24px;font:inherit;color:var(--ink)}
.a-theme-system[aria-pressed=true]{background:var(--soft)}
html body button.a2ptheme.a2ptheme:focus-visible{outline:3px solid var(--blue)!important;outline-offset:3px!important}
html[data-theme=dark] ::selection{background:#8ad9bd;color:#101e1b}
html[data-theme=dark] .a-actions>a:not(.a-contact),html[data-theme=dark] .a-actions>button:not(.a2ptheme){background:var(--soft);color:var(--ink)}
html[data-theme=dark] .a-actions>a:hover,html[data-theme=dark] .a-actions>button:not(.a2ptheme):hover{background:var(--ink);color:var(--paper)}
html[data-theme=dark] .hero-workspace-layer,html[data-theme=dark] .project-showcase,html[data-theme=dark] .a-project-gallery pre{background:var(--soft);color:var(--ink)}
html[data-theme=dark] .btn.primary{color:var(--paper)}
/* These cinematic/code surfaces remain deliberately dark in both modes. Their
   local palette also keeps light captions and inverted actions readable. */
html[data-theme=dark] :is(.a-coda-scroll,.a-reel-stage,.a-stage,.studio-static,.a-story-stage,.case-code-window-v45,.hero-code,.project-code,.code-window,#brief,.project-contact-v43,#profile-contact){--paper:#e7eeea;--ink:#18332f;--muted:#b2c7bd;--soft:#20362e;--line:#6e897b;--jade:#8ad9bd;--blue:#8ad9bd}
html[data-theme=dark] :is(.a-coda-copy,.a-reel-stage,.studio-static article,.case-code-window-v45,.hero-code,.project-code,.code-window){color:#e7eeea}
html[data-theme=dark] .a-stage-caption,html[data-theme=dark] .a-reel-caption{color:#e7eeea}
html[data-theme=dark] .a-project-gallery .a-project-art{color:#e7eeea}
/* Package chapter has a dark shell and a theme-aware need explorer inside it. */
html[data-theme=dark] .a-home #work-paths{background:#162d25;color:#e7eeea}
html[data-theme=dark] .package-result>b,html[data-theme=dark] .package-jumps a>span:first-child,html[data-theme=dark] .studio-compare-grid dt{color:#e7eeea}
html[data-theme=dark] .a-package-actions>.btn{background:#e7eeea;color:#18332f;border-color:#e7eeea}
html[data-theme=dark] .a-home #work-paths .a-package-actions>.btn:hover{background:#c6e7d8;color:#18332f}
html[data-theme=dark] .a-home #work-paths .studio-fit a:hover{color:var(--paper)}
html[data-theme=dark] .a-home #work-paths :is(.package-card-v60,.a-package-features,.studio-compare,.package-jumps a){border-color:#6e897b}
html[data-theme=dark] .package-read-stop.a-choice-target{background:#294b3c}
/* Keep inverse call-to-action text dark when a mint hover surface is used. */
html[data-theme=dark] :is(.a-case.a-inner a.service-cta,.a-profile.a-inner .profile-cta):hover{color:#101e1b}
html[data-theme=dark] :is(a,button,summary):focus-visible{outline-color:#8ad9bd}

/* The opening is an artwork surface, independent of the selected page mode. */
.a-opening{--paper:#f0f0eb;--ink:#182226;--muted:#b2bdbf;--soft:#1b2226;--line:#465054;--jade:#b4e9d6;color:#f0f0eb;background:#101316}
/* The directory closing panel owns an inverse palette; its light action needs
   dark text rather than the page-level primary-button inversion. */
html[data-theme=dark] .a-library .project-contact-v43 .btn.primary{background:#e7eeea;color:#182226;border-color:#e7eeea}
html[data-theme=dark] .a-library .project-contact-v43 .btn.primary:hover{background:#b4e9d6;color:#182226;border-color:#b4e9d6}