/* The Highland light: js/boot.js sets data-light from the sun over Inverness (or the visitor's choice). */
:root{color-scheme:light;--card-lairds:#d6dbca;--card-ladies:#e9d9ce;--card-ballifeary:#ccd7da;--card-eden:#d9d4c4;--card-bd:#cfd6e3;--hero-tint:transparent}
body{transition:background-color 1.2s var(--ease),color 1.2s var(--ease)}

/* Dawn: a cool, rosy paper and a pale lift on the landscape. */
:root[data-light=dawn]{--paper:#f3eee9;--hero-tint:linear-gradient(180deg,rgba(236,190,184,.2),transparent 60%)}
/* Dusk: warm, low amber light. */
:root[data-light=dusk]{--paper:#f2eadd;--hero-tint:linear-gradient(0deg,rgba(237,128,70,.26),rgba(237,128,70,.06) 70%)}

/* Night: the page inverts; dark-ground sections stay a shade deeper than the page. */
:root[data-light=night]{color-scheme:dark;--paper:#111a16;--ink:#e9e5da;--muted:#a1a99d;--line:rgba(233,229,218,.17);--card-lairds:#232d26;--card-ladies:#2f2724;--card-ballifeary:#212c30;--card-eden:#2a2a22;--card-bd:#1f2633;--hero-tint:linear-gradient(180deg,rgba(6,12,20,.5),rgba(6,12,20,.25))}
:root[data-light=night] :is(.hero,.site-header,.services,.offers,.contact,.masthead,.mobile-menu,.next-project){--paper:#e9e5da;--ink:#0a110e}
:root[data-light=night] .browser-frame,:root[data-light=night] .device{--paper:#f2f0e9;--ink:#15221d}
:root[data-light=night] .button-dark:hover{background:#fff}
:root[data-light=night] .word.is-muted{color:#3d4741}
:root[data-light=night] .playground-teaser{background:#18231e}
:root[data-light=night] .teaser-orbits>span{border-color:rgba(233,229,218,.12)}
:root[data-light=night] .pine-tree{mix-blend-mode:screen;filter:invert(1) hue-rotate(180deg) saturate(.35) brightness(.92)}
:root[data-light=night] .pine-caption{color:#8f998c}
:root[data-light=night] img:not(.pine-tree):not(.hero-landscape img){filter:brightness(.92)}

/* Playground tokens follow the same light. */
:root[data-light=dawn] .playground-page{--ivory:#f3eee9}
:root[data-light=dusk] .playground-page{--ivory:#f2eadd}
:root[data-light=night] .playground-page{--ivory:#111a16;--ink:#e9e5da;--rule:rgba(233,229,218,.17)}

/* A small, honest status: where the light is right now. */
.light-toggle{background:none;padding:7px 0;font:inherit;letter-spacing:inherit;display:inline-flex;align-items:center;gap:7px}
.light-toggle::before{content:'';width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffd9a0,var(--orange));box-shadow:0 0 0 3px #ed5a3b1f}
:root[data-light=night] .light-toggle::before{background:radial-gradient(circle at 65% 35%,transparent 38%,#e9e5da 40%)}

/* The header switch: sun by day, moon after dark (js/boot.js). */
.header-actions,.pg-header-actions{display:flex;align-items:center;gap:14px}
.theme-toggle{width:44px;height:44px;flex:none;display:grid;place-items:center;padding:0;border:1px solid color-mix(in srgb,currentColor 40%,transparent);border-radius:50%;background:none;color:inherit;cursor:pointer;transition:background .25s}
.theme-toggle:hover{background:color-mix(in srgb,currentColor 14%,transparent)}
.theme-toggle:focus-visible{outline:2px solid var(--orange,#ed5a3b);outline-offset:3px}
.theme-toggle svg{grid-area:1/1;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .3s}
.theme-moon{opacity:0;transform:rotate(-80deg) scale(.5)}
.theme-moon path{fill:currentColor;stroke:none}
:root[data-light=night] .theme-sun{opacity:0;transform:rotate(80deg) scale(.5)}
:root[data-light=night] .theme-moon{opacity:1;transform:none}

/* Switching modes: the new palette spreads out in a circle from the button pressed. */
html.theme-switching *{view-transition-name:none!important}
html.theme-switching::view-transition-old(root){animation:none;mix-blend-mode:normal}
html.theme-switching::view-transition-new(root){animation:theme-reveal .75s cubic-bezier(.65,0,.35,1) both;mix-blend-mode:normal}
@keyframes theme-reveal{from{clip-path:circle(0 at var(--reveal-x) var(--reveal-y))}to{clip-path:circle(150vmax at var(--reveal-x) var(--reveal-y))}}