/* ASFARI digital: light version of the site.
   Active when <html data-theme="light">. The dark site stays the default.
   Mock-ups of example sites, phones and the pixel queue scene keep their own colours. */

/* ---------- switcher button (both themes) ---------- */
.theme-toggle{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;padding:0;border-radius:50%;border:1px solid #ffffff28;background:#12121266;color:var(--paper);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .2s,color .2s,border-color .2s,transform .3s}
@media (hover:hover){.theme-toggle:hover{background:var(--paper);color:var(--ink)}}
.theme-toggle:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .i-moon{display:none}
.site-header .theme-toggle{margin-left:auto;margin-right:-6px}
.site-header .nav-contact{margin-left:0}
@media (max-width:900px){.site-header .theme-toggle{width:36px;height:36px;margin-right:4px}.site-header .nav-contact{white-space:nowrap}}

/* ---------- light theme ---------- */
html[data-theme=light]{--line:rgba(17,17,16,.14);--tint:#e8e5d9;--card:#fbfaf6;color-scheme:light}
html[data-theme=light] body{background:var(--paper);color:var(--ink)}
html[data-theme=light] ::selection{background:var(--lime);color:var(--ink)}

/* switcher in light mode shows the moon */
html[data-theme=light] .theme-toggle{border-color:#11111026;background:#ffffff8c;color:var(--ink)}
@media (hover:hover){html[data-theme=light] .theme-toggle:hover{background:var(--ink);color:var(--paper)}}
html[data-theme=light] .theme-toggle .i-sun{display:none}
html[data-theme=light] .theme-toggle .i-moon{display:block}

/* header + menus */
html[data-theme=light] .site-header{color:var(--ink)}
html[data-theme=light] .main-nav{border-color:#11111022;background:#ffffff8c}
html[data-theme=light] .main-nav a[aria-current=page],html[data-theme=light] .main-nav a.active,html[data-theme=light] .main-nav a:hover{background:var(--ink);color:var(--paper)}
html[data-theme=light] .nav-drop{background:#fbfaf6f5;border-color:#1111101f;box-shadow:0 24px 60px -24px #11111040}
html[data-theme=light] .main-nav .nav-drop a{color:var(--ink)}
html[data-theme=light] .main-nav .nav-drop a:hover,html[data-theme=light] .main-nav .nav-drop a:focus-visible,html[data-theme=light] .main-nav .nav-drop a[aria-current=page]{background:#1111100d;color:var(--ink)}
html[data-theme=light] .main-nav .nav-drop a span{color:#6b6a62}
html[data-theme=light] .main-nav .nav-drop a.all{border-color:#1111101a;color:#a9558d}
html[data-theme=light] .main-nav .lang-switch a:hover{background:none;color:var(--ink)}
html[data-theme=light] .nav-contact{border-color:#11111066}
html[data-theme=light] .nav-contact span{color:#a9558d}
html[data-theme=light] .menu-toggle span{background:var(--ink)}
html[data-theme=light] .mobile-menu:not([hidden]){box-shadow:0 0 0 1px #1111101a,6px 6px 0 #f18bc790}

/* hero */
html[data-theme=light] .hero,html[data-theme=light] .svc-hero{background:var(--paper);color:var(--ink)}
html[data-theme=light] .hero-glow{background:radial-gradient(ellipse 75% 26% at 50% -10%,#f18bc76b,transparent),radial-gradient(ellipse 64% 26% at 51% 112%,#b8abef80,transparent);opacity:1}
html[data-theme=light] .hero-kicker{color:#45443e}
html[data-theme=light] .hero-content p,html[data-theme=light] .svc-lead{color:#45443e}
html[data-theme=light] .h1-tag{color:#8a3f6e;background:#f18bc726;border-color:#d46aa899}
html[data-theme=light] .hero-bottom{color:#5f5e57}
html[data-theme=light] .desk-hint{color:#6b6a62}
html[data-theme=light] .desk-hint button{color:var(--ink);border-color:#11111055}
html[data-theme=light] .desktop-project{box-shadow:7px 9px 0 #11111018}
html[data-theme=light] .desktop-caption{background:#ffffffb3;color:var(--ink)}
html[data-theme=light] .scroll-link span{color:var(--ink)}
html[data-theme=light] .button.ghost{border-color:#11111040;color:var(--ink)}
html[data-theme=light] .button.dark{background:var(--ink);color:var(--paper)}

/* former dark sections become a warm tint, so the page keeps its rhythm */
html[data-theme=light] .section-dark{background:var(--tint);color:var(--ink)}
html[data-theme=light] .section-dark .section-intro{color:#5f5e57}

/* queue: the pixel scene stays a night scene, the frame around it goes light */
html[data-theme=light] .queue{background:var(--tint);color:var(--ink)}
html[data-theme=light] .queue .section-intro{color:#5f5e57}
html[data-theme=light] .cast-card{background:var(--card);border-color:#11111017;color:var(--ink)}
html[data-theme=light] .cast-card p{color:#5f5e57}
html[data-theme=light] .cast-card .mono{color:#a9558d}
html[data-theme=light] .queue-note{color:#6b6a62}
html[data-theme=light] .queue-note a{color:var(--ink)}

/* services list */
html[data-theme=light] .service-number{color:#8d8e83}
html[data-theme=light] .p-from,html[data-theme=light] .p-unit{color:#5f5e57}
html[data-theme=light] .p-amt{color:var(--ink)}
html[data-theme=light] .service-body>p{color:#45443e}
html[data-theme=light] .tags li{border-color:#11111030}
html[data-theme=light] .service-actions a,html[data-theme=light] .service-actions button,html[data-theme=light] .svc-more{border-color:#11111055;color:var(--ink)}
html[data-theme=light] .svc-more:hover{color:#a9558d}
html[data-theme=light] .service[open] .service-toggle{color:#a9558d}
html[data-theme=light] .price-note{color:#6b6a62}
html[data-theme=light] .svc-tile,html[data-theme=light] .svc-check{box-shadow:0 0 0 1px #1111101a,0 26px 50px -28px #11111066}
html[data-theme=light] .brw{box-shadow:0 30px 60px -28px #11111080,0 0 0 1px #1111101a}

/* packages */
html[data-theme=light] .packages:before{background:radial-gradient(ellipse at center,#f18bc740,transparent 70%)}
html[data-theme=light] .pkg{background:var(--card);border-color:#11111017;box-shadow:0 1px 0 #fff inset,0 22px 50px -34px #11111055}
html[data-theme=light] .pkg.best{background:linear-gradient(170deg,#f18bc7,#d873ad 45%,#b8abef);box-shadow:0 30px 70px -24px #f18bc799}
html[data-theme=light] .pkg.best .pkg-in{background:radial-gradient(ellipse 120% 60% at 50% 0%,#fde3f1,#fbfaf6 60%)}
html[data-theme=light] .pkg-icon{background:#1111100d}
html[data-theme=light] .pkg-icon svg{stroke:var(--ink)}
html[data-theme=light] .pkg-tag{color:#5f5e57}
html[data-theme=light] .pkg-note,html[data-theme=light] .pkg-was{color:#7a7b70}
html[data-theme=light] .pkg-btn{border-color:#1111103a;color:var(--ink)}
html[data-theme=light] .pkg-btn:hover{background:var(--ink);color:var(--paper)}
html[data-theme=light] .pkg.best .pkg-btn{background:var(--ink);color:var(--paper)}
html[data-theme=light] .pkg.sale .pkg-btn{background:var(--lime);color:var(--ink)}
html[data-theme=light] .pkg.sale .pkg-btn:hover{background:var(--ink);color:var(--paper)}
html[data-theme=light] .pkg.sale .pkg-amt{color:var(--ink);background:linear-gradient(transparent 62%,var(--lime) 62%);padding:0 4px;margin-left:-4px}
html[data-theme=light] .pkg-list{border-color:#11111017}
html[data-theme=light] .pkg-list li{color:#3b3a35}
html[data-theme=light] .pkg-list li.lead{color:var(--ink)}
html[data-theme=light] .pkg-list li:before{border-color:#a9558d}

/* process */
html[data-theme=light] .steps li{border-color:var(--line)}
html[data-theme=light] .step-num{color:#a9558d}
html[data-theme=light] .steps p{color:#5f5e57}

/* studio note card, other dark cards on inner pages */
html[data-theme=light] .lab-note{background:var(--tint);color:var(--ink)}
html[data-theme=light] .lab-note .mono,html[data-theme=light] .other .mono{color:#6b6a62}
html[data-theme=light] .live-dot{box-shadow:0 0 0 1px #11111022}

/* footer */
html[data-theme=light] footer{background:var(--paper);color:var(--ink)}
html[data-theme=light] footer p{color:#5f5e57}
html[data-theme=light] footer h2,html[data-theme=light] .footer-bottom{color:#6b6a62}
html[data-theme=light] footer li a{color:var(--ink)}
html[data-theme=light] footer li a:hover{color:#a9558d}

/* gentle fade when switching (skipped for reduced motion) */
@media (prefers-reduced-motion:no-preference){
  html.theme-anim body,html.theme-anim body *{transition:background-color .35s ease,color .35s ease,border-color .35s ease!important}
}

/* blog headers */
html[data-theme=light] .bl-hero{background:var(--paper);color:var(--ink)}
html[data-theme=light] .bl-lead{color:#45443e}
html[data-theme=light] .bl-meta{color:#6b6a62}
html[data-theme=light] .bl-cover img{box-shadow:0 40px 80px -44px #11111066}
html[data-theme=light] .grid-background{background-image:linear-gradient(#1111100d 1px,transparent 1px),linear-gradient(90deg,#1111100d 1px,transparent 1px)}

/* motion page character section */
html[data-theme=light] .cast{background:var(--tint);color:var(--ink)}
html[data-theme=light] .cast .section-intro{color:#5f5e57}

/* website-check page: the two ways + score card */
html[data-theme=light] .way{background:var(--card);border-color:#11111017;color:var(--ink)}
html[data-theme=light] .way.free{background:linear-gradient(160deg,#fde3f1,#fbfaf6 60%);border-color:#f18bc799}
html[data-theme=light] .other:hover{background:#fbfaf6}
html[data-theme=light] .way li{color:#3b3a35}
html[data-theme=light] .way .mono,html[data-theme=light] .way p.note,html[data-theme=light] .way .amt small{color:#6b6a62}

/* pages whose hero stays a night scene (Motion page): keep the dark-mode colours there */
html[data-theme=light] .club{color:var(--paper)}
html[data-theme=light] body:has(.club) .site-header{color:var(--paper)}
html[data-theme=light] body:has(.club) .main-nav{border-color:#ffffff28;background:#12121266}
html[data-theme=light] body:has(.club) .main-nav a[aria-current=page],html[data-theme=light] body:has(.club) .main-nav a.active,html[data-theme=light] body:has(.club) .main-nav a:hover{background:var(--paper);color:var(--ink)}
html[data-theme=light] body:has(.club) .nav-contact{border-color:#a9a99d}
html[data-theme=light] body:has(.club) .nav-contact span{color:var(--lime)}
html[data-theme=light] body:has(.club) .menu-toggle span{background:var(--paper)}
html[data-theme=light] body:has(.club) .theme-toggle{border-color:#ffffff28;background:#12121266;color:var(--paper)}
@media (hover:hover){html[data-theme=light] body:has(.club) .theme-toggle:hover{background:var(--paper);color:var(--ink)}}

/* ---------- contrast pass (Nov 2026): no light text on light grounds ---------- */
/* pink and lime as TEXT become a deep rose / olive on paper and tint (pink stays as fills and the logo dot) */
html[data-theme=light] :is(.step-num,.price-big em,.way.free .amt,.service-actions span,.fit-list li span,.no-list li span,.other .mono span,.h1-tag span,.svc-hero .eyebrow span,.service[open] .service-toggle,.service summary:hover,.service summary:hover .p-amt,footer li a:hover,.nav-contact span,.main-nav .nav-drop a.all){color:#8c3f70}
html[data-theme=light] :is(.offer-line,.price-chip .p-amt){color:#4a5612}

/* greys that were too pale on paper / tint */
html[data-theme=light] :is(.crumbs,.crumbs a,.service-number,.price-big small,.price-chip,.price-chip .p-was,.pkg-note,.pkg-was,.p-was){color:#5f5e57}
html[data-theme=light] .crumbs a{border-color:#11111040}
html[data-theme=light] .price-factors li{color:#3b3a35}
html[data-theme=light] :is(.price-note,.price-note a,.queue-note,.wp-count,.project-caption>span>span,.project-index,.work-note .mono,.other .mono,.way .mono,.way p.note,.amt small,.lab-note .mono,.svc-blog .k,.bl-card .k){color:#55544e}
html[data-theme=light] .mobile-menu .button.dark{background:var(--ink);color:var(--paper)}

/* contrast pass, round 2 */
html[data-theme=light] :not(.club-copy)>.eyebrow span{color:#8c3f70}
html[data-theme=light] :is(.fit p,.m3d-intro,.ana-notes p,.board-note,.m3d figcaption span,.own figcaption){color:#45443e}
html[data-theme=light] .ana-bar div:nth-child(3){color:var(--paper)}
html[data-theme=light] .sc-score .sc-hint{color:#b9b9ae}
html[data-theme=light] .hub-card :is(.p-from,.p-unit,.p-was){color:#3b3a35}
html[data-theme=light] .heading-spark{color:#6a4fa0}
/* pages whose header stays on a dark hero (Motion club, case pages): keep the dark-mode accents */
html[data-theme=light] body:is(:has(.club),:has(.case-hero)) .site-header :is(.nav-contact span,.main-nav .nav-drop a.all){color:var(--lime)}
/* inline colours written into the pages (light sections only) */
html[data-theme=light] .section-dark p[style*="color:#b9b9ae"],html[data-theme=light] p.board-note[style*="color:#8f8f85"]{color:#45443e!important}
html[data-theme=light] :not(.club-copy)>.eyebrow span[style*="var(--pink)"]{color:#8c3f70!important}
html[data-theme=light] :is(.yt figcaption span,.fmt figcaption span,.reel-duo figcaption,.x-film-fig figcaption,.dark figcaption){color:#45443e}
html[data-theme=light] .section-dark p[style*="185, 185, 174"],html[data-theme=light] p.board-note[style*="143, 143, 133"]{color:#45443e!important}
html[data-theme=light] :not(.club-copy)>.eyebrow span[style*="241, 139, 199"]{color:#8c3f70!important}
html[data-theme=light] .price-factors li:before,html[data-theme=light] .way li:before{color:#5d6b14}