/* The whole site in off-white (Brody, 24 Oct 2026: "i want everything in offwhite... the whole website and the
   signed-in app, all off-white. The business page too"). It reverses the deep terracotta and deep sage the doors and
   the designer side's pages wore since 13 Oct, and keeps everything else about them: the rounded windows over the
   dunes, the frosted glass panels, the type and every part's layout. Only the colour changes:
     - the page and its surfaces in a warm off-white, the words a warm brown, not black (24 Oct: "black text does not work at all"), on every page;
     - every window the plain dunes, washed with the off-white from the left instead of the side's colour;
     - the glass panels white and frosted, with a soft warm shadow, and the words in them ink, not white;
     - colour left only in the logo (terracotta on the designer side, sage on the business side) and a few marks.
   It's one file, loaded after every other stylesheet (layout.html), so the change is in one place and the colours it
   replaces stay where they were in designers.css, business.css, sides.css and windows.css. The tried and rejected
   alternative was a fresh light design (24 Oct: "feels more like a template"): this is the same design, recoloured.
   Since later on 24 Oct it is the light half only: every page and the app follow the device ("auto", theme.js),
   and in dark the doors' deep terracotta and sage come back from designers.css, business.css and app.css. */

/* ---- the site's light colours, warmed: every page ---- */
html:not([data-theme="dark"]){
  --nf-page:#F3F0EA; --nf-page-hi:#F6F3EE; --nf-page-lo:#EEEAE3;
  --nf-surface:#F6F3EE; --nf-surface-soft:#F2EEE8; --nf-surface-muted:#ECE8E1; --nf-surface-light:#FAF8F4;
  --nf-ink:#5C4B3F; --nf-ink-strong:#4E3F34; --nf-ink-secondary:#6E5E52; --nf-ink-soft:#7D6E62;
  --nf-ink-muted:#8F8175; --nf-ink-faint:#A39689; --nf-ink-control:#5C4B3F; --nf-ink-control-hover:#4E3F34;
  --nf-text-ghost:#C2B8AD; --nf-on-control:#F8F5F1; --nf-divider:#E2DDD5;
  --nf-hair:rgba(92,75,63,.1); --nf-leader:rgba(92,75,63,.25);
  --nf-shadow:rgba(70,55,40,.07);
}
html:not([data-theme="dark"]) body{background:var(--nf-page)}
/* the words, readable (the site audit, 30 Oct 2026): the haze style.css mixes into every shade had body text at 3.7:1
   and small print at 2.3:1 on the off-white. Each shade is set here instead, a deeper brown with a light wash of the
   page, so every one clears the 4.5:1 that reading needs (5.8 for text down to 4.9 for the faintest, on the page)
   and they still step down in the same order. The app (body.nfa) mixes its own, so it's named too */
html:not([data-theme="dark"]),html:not([data-theme="dark"]) body.nfa{
  --nf-text:color-mix(in oklab,#F3F0EA 10%,#5C4B3F); --nf-text-strong:color-mix(in oklab,#F3F0EA 10%,#4E3F34);
  --nf-text-secondary:color-mix(in oklab,#F3F0EA 12%,#5E5045); --nf-text-soft:color-mix(in oklab,#F3F0EA 10%,#64564B);
  --nf-text-muted:color-mix(in oklab,#F3F0EA 8%,#685A4F); --nf-text-faint:color-mix(in oklab,#F3F0EA 6%,#6E5E52)}

/* ---- the windows: the plain dunes, an off-white wash, brown words washed into the cream (sides.css and windows.css draw them) ---- */
html:not([data-theme="dark"]) :is(body.designers,body.business){--side-wash:#F3F0EA;--side-deep:#E9E4DC;--side-mist:#F3F0EA;
  --nfn-veil:rgba(255,255,255,.58);--nfn-img:url(/img/landscape.webp)}
html:not([data-theme="dark"]) :is(body.designers,body.business) :is(.nf-hero,.nfn-win){
  --nf-text:color-mix(in oklab,#F3F0EA 10%,#5C4B3F); --nf-text-strong:color-mix(in oklab,#F3F0EA 10%,#4E3F34);
  --nf-text-secondary:color-mix(in oklab,#F3F0EA 12%,#5E5045); --nf-text-soft:color-mix(in oklab,#F3F0EA 10%,#64564B);
  --nf-text-muted:color-mix(in oklab,#F3F0EA 8%,#685A4F); --nf-text-faint:color-mix(in oklab,#F3F0EA 6%,#6E5E52);   /* as above (30 Oct) */
  --nf-text-ghost:#C2B8AD;
  --nf-leader:rgba(92,75,63,.25); --nf-hair:rgba(92,75,63,.1);
  --nf-glass:rgba(255,255,255,.6); --nf-glass-edge:rgba(255,255,255,.8); --nf-glass-lit:rgba(255,255,255,.7);
  --nf-control:#5C4B3F; --nf-control-hover:#4E3F34; --nf-on-control:#F8F5F1; --side-mist:#F3F0EA;
  border-color:rgba(255,255,255,.8); color:var(--nf-text)}
html:not([data-theme="dark"]) :is(body.designers,body.business) .nf-side-land .nf-land-img{opacity:.9}

/* the glass: white and frosted, the shadow warm and light rather than the deep terracotta one */
html:not([data-theme="dark"]) :is(body.designers,body.business) :is(.nfn-card,.nfn-steps>li,.nfn-plans>li),
html:not([data-theme="dark"]) :is(body.designers,body.business) .nfn-win .nfp-faq details,
html:not([data-theme="dark"]) body.designers:is(.is-pricing,.is-example) .nfp-win .nfp-plan,
html:not([data-theme="dark"]) body.is-how :is(.nfr .nfr-file,.nfh-stages li,.nfh-dont-list li){
  background:var(--nfn-veil); border-color:rgba(255,255,255,.85);
  box-shadow:0 24px 60px rgba(70,55,40,.08),inset 0 1px 0 rgba(255,255,255,.9)}
html:not([data-theme="dark"]) :is(body.designers,body.business) :is(.nfn-plans>li.is-featured,.nfn-win .nfp-faq details[open]),
html:not([data-theme="dark"]) body.designers.is-pricing .nfp-win .nfp-plan.is-featured{background:rgba(255,255,255,.85);border-color:#fff}
html:not([data-theme="dark"]) :is(body.designers,body.business) .nfn-block{background:rgba(255,255,255,.55);border-color:rgba(92,75,63,.06)}
html:not([data-theme="dark"]) :is(body.designers,body.business) .nfn-chips span{background:rgba(92,75,63,.06)}
html:not([data-theme="dark"]) :is(body.designers,body.business) .nfn-noticed li:before{background:var(--side-accent)}

/* the example card's marks and its "Matched to your work" bar, in ink */
html:not([data-theme="dark"]) :is(body.designers,body.business) .nfn-yours{background:#5C4B3F;color:#F8F5F1}
html:not([data-theme="dark"]) :is(body.designers,body.business) .nfn-yours .nfn-mark{border-color:rgba(248,245,241,.4);color:#F8F5F1}
html:not([data-theme="dark"]) :is(body.designers,body.business) :is(.nfn-tag,.nfn-mark){border-color:rgba(92,75,63,.22)}
html:not([data-theme="dark"]) :is(body.designers,body.business) .nfn-parts li:before{border-color:rgba(92,75,63,.28)}
html:not([data-theme="dark"]) :is(body.designers,body.business) .nfn-parts li:hover:before,
html:not([data-theme="dark"]) :is(body.designers,body.business) .nfn-anat:has(li[data-n="1"]:hover) [data-mark="1"],
html:not([data-theme="dark"]) :is(body.designers,body.business) .nfn-anat:has(li[data-n="2"]:hover) [data-mark="2"],
html:not([data-theme="dark"]) :is(body.designers,body.business) .nfn-anat:has(li[data-n="3"]:hover) [data-mark="3"]{background:#5C4B3F;color:#F8F5F1}
html:not([data-theme="dark"]) :is(body.designers,body.business) .nfn-anat:has(li[data-n="4"]:hover) [data-mark="4"]{background:#F8F5F1;color:#5C4B3F}
html:not([data-theme="dark"]) :is(body.designers,body.business) .nfn-anat:has(li[data-n="1"]:hover) .nfn-block:has([data-mark="1"]),
html:not([data-theme="dark"]) :is(body.designers,body.business) .nfn-anat:has(li[data-n="2"]:hover) .nfn-block:has([data-mark="2"]),
html:not([data-theme="dark"]) :is(body.designers,body.business) .nfn-anat:has(li[data-n="3"]:hover) .nfn-block:has([data-mark="3"]){background:#fff;border-color:rgba(92,75,63,.1)}
/* the small pictures: the plain dunes, not multiplied into a colour */
html:not([data-theme="dark"]) :is(body.designers,body.business) :is(.nfn-shot,.nfw-shot){background-image:var(--nfn-img);background-color:#E9E4DC;background-blend-mode:normal}
html:not([data-theme="dark"]) :is(body.designers,body.business) .nfn-shot b{color:rgba(92,75,63,.7)}

/* the four along the foot of the first window */
html:not([data-theme="dark"]) :is(body.designers,body.business) .nfd-icon{background:rgba(255,255,255,.6);border-color:rgba(92,75,63,.1)}
html:not([data-theme="dark"]) :is(body.designers,body.business) .nfd-icons a:hover .nfd-icon{background:#fff}

/* the logo: the side's own colour, the one touch of it in the window (sides.css turns it white there) */

/* ---- the signed-in app: its own light colours follow the :root ones above; the logo in the designer side's
   terracotta, as it was in the app's dark (app.css) and as it is on the website ---- */
html:not([data-theme="dark"]) body.nfa{--d-terra:#AD5F40}

/* ---- the pages with more in their windows ---- */
/* the business page's budget: the chosen band in ink, the match's icon drawn in ink rather than white */
html:not([data-theme="dark"]) body.business .nfn-bands span{background:rgba(255,255,255,.6);border-color:rgba(92,75,63,.1)}
html:not([data-theme="dark"]) body.business .nfn-bands .is-pick{background:#5C4B3F;border-color:#5C4B3F;color:#F8F5F1}
html:not([data-theme="dark"]) body.business .nfn-bands .is-also{background:none;border-color:rgba(92,75,63,.3)}
html:not([data-theme="dark"]) body.business .nfn-match{background:rgba(255,255,255,.55);border-color:rgba(92,75,63,.06)}
html:not([data-theme="dark"]) body.business .nfn-match-ico{background:rgba(92,75,63,.06)}
html:not([data-theme="dark"]) body.business .nfn-match-ico svg{stroke:#5C4B3F}
/* pricing: the plans' buttons quiet outlines, the featured one in ink */
html:not([data-theme="dark"]) body.is-pricing .nfp-win .nfp-go{background:rgba(255,255,255,.6);border-color:rgba(92,75,63,.18)}
html:not([data-theme="dark"]) body.is-pricing .nfp-win .nfp-go:hover{background:#fff}
html:not([data-theme="dark"]) body.is-pricing .nfp-win .is-featured .nfp-go{background:#5C4B3F;border-color:#5C4B3F;color:#F8F5F1}
/* the engine: its scene and research file in white glass instead of the terracotta veil */
html:not([data-theme="dark"]) body.is-how .nfn-win{--nf-surface:rgba(255,255,255,.55);--nf-surface-soft:rgba(255,255,255,.6);--nf-surface-muted:rgba(92,75,63,.05);
  --nf-surface-light:rgba(255,255,255,.8);--nf-shadow:rgba(70,55,40,.08);--nf-inner:rgba(255,255,255,.7)}
html:not([data-theme="dark"]) body.designers.is-how .nfg-win .nfg-record{background:rgba(255,255,255,.7);border-color:rgba(255,255,255,.9)}
html:not([data-theme="dark"]) body.designers.is-how .nfg-win .nfg-step{border-color:rgba(92,75,63,.1)}
html:not([data-theme="dark"]) body.is-how .nfg-win .nfg-tile{border-color:rgba(92,75,63,.08)}
html:not([data-theme="dark"]) body.is-how .nfr .nfr-panel{background:rgba(255,255,255,.6);border-color:rgba(92,75,63,.06)}
html:not([data-theme="dark"]) body.is-how .nfr .nfr-bars i{background:rgba(92,75,63,.14)}
/* the example: its wells and chips lighter glass inside the white cards */
html:not([data-theme="dark"]) body.is-example .nfp-win{--nf-surface-soft:rgba(255,255,255,.6);--nf-surface-muted:rgba(92,75,63,.05);
  --nf-surface-light:rgba(255,255,255,.85);--nf-hair:rgba(92,75,63,.1)}
html:not([data-theme="dark"]) body.designers.is-example .nfp-win :is(.nfx-quote,.nfx-shot){background:rgba(255,255,255,.6);border-color:rgba(92,75,63,.06)}
html:not([data-theme="dark"]) body.designers.is-example .nfp-win .nfx-chips span:not(.nfx-chips-label){background:rgba(92,75,63,.06)}
html:not([data-theme="dark"]) body.designers.is-example .nfp-win .nfx-shot span{background:rgba(255,255,255,.75)}
html:not([data-theme="dark"]) body.is-example .nfp-win .nfx-stages .is-on{box-shadow:inset 0 -1px 0 #5C4B3F}