/* Soft Mint is the default. Explicit colour previews are scoped below. */
html body.playroom{--peach:var(--wash);--lilac:var(--wash);--rose:var(--wash)}
html .playroom .hero-copy>p{color:var(--ink)}
html .playroom .pop-hero::before{background:var(--wash) url('/assets/playroom-wave-highlight.svg') center bottom/100% 100% no-repeat;-webkit-mask:url('/assets/playroom-green-wave.svg') center bottom/100% 100% no-repeat;mask:url('/assets/playroom-green-wave.svg') center bottom/100% 100% no-repeat}
html .playroom .page-ending{background-image:none}
html .playroom .page-ending::before{display:none}
html .playroom .pop-course-art::before,html .playroom .portrait-note::before{background:var(--lime);-webkit-mask:url('/assets/playroom-brush-field.svg') center/contain no-repeat;mask:url('/assets/playroom-brush-field.svg') center/contain no-repeat}
html .playroom .site-footer,html .playroom .site-footer a{color:var(--wash)}
html:not([data-game]) .playroom .pop-hero{background-image:linear-gradient(180deg,#0000 0%,#0000000e 100%)}
html body.playroom{--lime:#d5f1d8;--wash:#f5faf5;--ink:#193a2b;--muted:#4f6557;--line:#193a2b26}
html .playroom .site-footer{background:#193a2b}
html .playroom .framework-core{background:var(--lime);color:var(--ink)}
html .playroom .framework-core :is(.framework-label,.framework-from,.framework-to){color:var(--ink)}
html .playroom .framework-core .framework-label{border-color:color-mix(in srgb,var(--ink) 24%,transparent)}

/* Peach & Ink: cream, peach fields and orange accents from the supplied references. */
html[data-palette="peach"],html[data-palette="peach"] body.playroom {
 --paper:#fffaf6;
 --wash:#fff0e7;
 --lime:#fbd5b5;
 --mint:var(--lime);
 --peach:#fbd5b5;
 --lilac:#ffe7cf;
 --rose:#ffe7cf;
 --ink:#211b16;
 --muted:#69574a;
 --line:#211b162e;
 --accent:#fa8919;
 --accent-hover:#ffad5c;
 --gold:#ffc52a;
 color:var(--ink);
}
html[data-palette="peach"] .playroom .site-header {background:linear-gradient(110deg,#ffe7cfeb,#fff0e7de);border-color:#211b1626;box-shadow:0 6px 20px #6b36180c}
html[data-palette="peach"] .playroom .pop-hero {background-image:none}
html[data-palette="peach"] .playroom .menu-ready .site-menu {background:var(--paper);border-color:var(--line)}
html[data-palette="peach"] .playroom :is(.button,.nav-cta,.btn):not(.ghost) {background:var(--accent);color:var(--ink);border-color:var(--ink);box-shadow:2px 3px 0 var(--lime),3px 4px 0 var(--ink)}
html[data-palette="peach"] .playroom :is(.button,.nav-cta,.btn):not(.ghost):hover {background:var(--accent-hover);box-shadow:0 1px 0 var(--lime),1px 2px 0 var(--ink)}
html[data-palette="peach"] .playroom :is(.button,.nav-cta,.btn):active {box-shadow:none}
html[data-palette="peach"] .playroom :is(.wordmark-dot,.text-link,.more) {color:var(--ink)}
html[data-palette="peach"] .playroom :is(a,button,summary,input):focus-visible {outline-color:var(--ink)}
html[data-palette="peach"] .playroom :is(.certification-footer,.site-footer) a:focus-visible {outline-color:var(--gold)}
html[data-palette="peach"] .playroom :is(.hero-name,.framework-name) {background:var(--gold)}
html[data-palette="peach"] .playroom :is(.index-story,.faq details) {background:var(--paper);border-color:var(--ink)}
html[data-palette="peach"] .playroom .faq details[open] {background:var(--lilac)}
html[data-palette="peach"] .playroom .recommendation-controls button {background:var(--lime)}
html[data-palette="peach"] .playroom .recommendation-controls button:hover {background:var(--accent)}
html[data-palette="peach"] .playroom .site-footer {background:#141512}
/* The CV has its own paper surfaces and a few fixed green accents. */
html[data-palette="peach"] .playroom .story {background:linear-gradient(var(--lilac),var(--paper) 340px);box-shadow:5px 5px 0 #211b1608}
html[data-palette="peach"] .playroom .chapter:not(.active):hover {background:var(--lilac)}
html[data-palette="peach"] .playroom .cv-hero .highlight::before {background:var(--gold)}
html[data-palette="peach"] .playroom :is(.portrait-frame,.home-portrait-frame)::before {border-color:var(--line)}
html[data-palette="peach"] .playroom :is(.notion-callout,.notion-content pre,#lesson-nav a:hover) {background:var(--lilac)}
html[data-palette="peach"] .playroom .lesson-card:hover {color:var(--muted)}

/* A small comparison control appears only on explicit preview URLs. */
html[data-palette] body.palette-preview {padding-bottom:88px}
.palette-toolbar {position:fixed;z-index:30;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:6px;padding:6px;border:1px solid #211b16;border-radius:14px;background:#fffaf6;box-shadow:0 4px 18px #211b1620;font:500 14px/1.4 Inter,Arial,sans-serif;white-space:nowrap}
.palette-toolbar a {display:flex;align-items:center;min-height:44px;padding:10px 16px;border-radius:8px;color:#211b16;text-decoration:none}
.palette-toolbar a[aria-current] {background:#fbd5b5}
html[data-palette="mint"] .palette-toolbar a[aria-current] {background:#d5f1d8}
.palette-toolbar a:hover {text-decoration:underline;text-underline-offset:4px}
.palette-toolbar a:focus-visible {outline:2px solid #211b16;outline-offset:2px}
@media print {.palette-toolbar{display:none}html[data-palette] body.palette-preview{padding-bottom:0}}