/* Secondary colour as a visible second brand colour. Loaded last, so FORMLAYER colour changes show across the site. */
:root{--secondary-deep:color-mix(in oklab,var(--secondary) 48%,#0e120c);--secondary-soft:color-mix(in oklab,var(--secondary) 30%,#e3e6df);--secondary-line:color-mix(in oklab,var(--secondary) 45%,transparent)}
/* On dark surfaces a very dark secondary colour is lifted to a readable lightness. */
:root{--secondary-ondark:var(--secondary)}
@supports (color:oklch(from red l c h)){:root{--secondary-ondark:oklch(from var(--secondary) max(l,.66) c h)}}

/* Dark surfaces */
.eyebrow,.edition,.sculpture-label,.hero-bottom>span{color:var(--secondary-ondark)}
main .section-kicker{color:var(--secondary-ondark);border-color:var(--secondary-line)}
h2 span,.contact-intro h2 span{color:var(--secondary-ondark)}
.svc-grid,.svc-item,.svc-tags li{border-color:var(--secondary-line)}.svc-tags li{color:var(--secondary-ondark)}
.studio-details summary small{color:var(--secondary-ondark)}
.layer-facts article{border-bottom-color:var(--secondary-line)}
.layer-facts h3{color:var(--secondary-ondark)}
.quiet-action{border-bottom-color:var(--secondary-ondark)}
.contact-note{color:var(--secondary-ondark)}
.contact-choice:has(input:checked){border-color:var(--secondary-ondark)}
footer>span{color:var(--secondary-ondark)}

/* Light Live-Demo surface: deep and soft variants keep contrast */
.module-showcase .section-kicker{color:var(--secondary-deep);border-color:color-mix(in oklab,var(--secondary-deep) 35%,transparent)}
.showcase-heading h2 span{color:var(--secondary-deep)}
.module-tabs{border-bottom-color:color-mix(in oklab,var(--secondary-deep) 35%,transparent)}
.module-tabs button[aria-selected=true]{border-bottom-color:var(--secondary-deep)}
.module-tabs button:hover{background:var(--secondary-soft)}
.module-name{color:var(--secondary-deep)}
.module-edit{background:var(--secondary-deep);border-color:var(--secondary-deep)}
.module-edit:hover{background:color-mix(in oklab,var(--secondary-deep) 80%,#fff)}
.module-surface .news-meta span,.module-surface .event-day{color:var(--secondary-deep)}
.module-surface .days button.has-event{background:var(--secondary-soft)}
.module-surface .days button.selected{background:var(--secondary-deep)}
.module-surface .image-info span{color:var(--secondary-deep)}
