/* komunamiami.com community overlays: colour themes switched on by assets/overlay.js. Only the brand colours change. */

/* El Portal · matte olive (from Oct 26, 2026): the village's tree canopy, flat and matte, in place of the primaries. */
html[data-overlay="el-portal"]{--blue:#5B6A3A;--red:#3F4A2C;--yellow:#A3A773}
html[data-overlay="el-portal"] .chip.hit::before{background:#A65A34}   /* an X-ray hit keeps a warning colour */
html[data-overlay="el-portal"] ::selection{background:#A3A773;color:#161513}

/* Fall · rust, mustard and oxblood on warm paper, espresso ink (Oct 27 to Nov 30, 2026). Rust and oxblood carry paper text at 5:1 and 8.5:1. */
html[data-overlay="fall"],html[data-overlay="halloween"]{--paper:#F2E8D7;--ink:#24170E;--blue:#A3441A;--red:#7A1E16;--yellow:#D69A2A;--g1:#5A4434;--g2:#8A7360;--g3:#BFAA90;--g4:#E2D4BE}
html[data-overlay="fall"] ::selection,html[data-overlay="halloween"] ::selection{background:#D69A2A;color:#24170E}

/* Halloween · the fall colours plus a small pumpkin in the tab and in place of a dot: the wordmark's, or the Project Room's on the homepages (Oct 27 to 31, 2026). */
html[data-overlay="halloween"]{--pumpkin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 60'%3E%3Cpath d='M31 17c0-6 2-10 7-13' fill='none' stroke='%234F5226' stroke-width='6' stroke-linecap='round'/%3E%3Cellipse cx='19' cy='37' rx='16' ry='20' fill='%23B9501C'/%3E%3Cellipse cx='45' cy='37' rx='16' ry='20' fill='%23B9501C'/%3E%3Cellipse cx='32' cy='37' rx='13' ry='22' fill='%23D9692A'/%3E%3C/svg%3E")}
html[data-overlay="halloween"] .mark i,html[data-overlay="halloween"] nav .room::before{border-radius:0;background:var(--pumpkin) center/contain no-repeat}
html[data-overlay="halloween"] .mark i{width:13px;height:13px;vertical-align:-1px}

/* Forest · forest green on white, the display headlines cut from a rainforest-green marble slab (from Nov 2, 2026). Forest and moss carry
   white text at 7.9:1 and 6.4:1. The marble (img/forest-marble.jpg; build_webp.py makes no WebP of it, the texture does not compress smaller)
   fills every .display headline through background-clip: text, scaled to that headline's box; the page itself stays plain white. */
html[data-overlay="forest"]{--paper:#FFFFFF;--ink:#0F1F17;--blue:#1F5C3C;--red:#336B2E;--yellow:#C2A93A;--g1:#2F4036;--g2:#5E6F64;--g3:#9CAA9F;--g4:#D3DACF}
html[data-overlay="forest"] .display{background:url("/img/forest-marble.jpg") center/cover no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
html[data-overlay="forest"] .display .blue{color:inherit}
html[data-overlay="forest"] .chip.hit::before{background:#A65A34}   /* an X-ray hit keeps a warning colour */
html[data-overlay="forest"] ::selection{background:#C2A93A;color:#0F1F17}