/* The designer side (designers.html, and pricing, the engine and the example): always dark (layout.html), in deep
   terracotta rather than black (Brody, 13 Oct 2026), the colour of the landing page's designer card. Terracotta marks
   the logo and the cards' icons; the first window of designers.html is the card's own rich terracotta (sides.css). */

body.designers{--d-terra:#AD5F40}
:root[data-theme="dark"] body.designers{--d-terra:#C98262}

/* the logo, in three terracottas */

/* the first window in terracotta, as rich as the landing page's designer card (sides.css draws it; these are its
   colours, the card's own: the wash over the dunes, and the deep colour they're multiplied into at night) */
body.designers{--side-wash:#D89E80;--side-deep:#B5694A;--side-wash-night:#7E4630;--side-accent:var(--d-terra)}

/* the cards' icons, as on the landing page's designer door */
body.designers .nfc-ico{background:color-mix(in oklab,var(--d-terra) 14%,var(--nf-surface-light))}
body.designers .nfc-ico svg{stroke:color-mix(in oklab,var(--d-terra) 85%,var(--nf-ink))}

/* the whole page in deep terracotta (Brody, 13 Oct 2026: instead of black, the dark terracotta of the cards). The page
   is always dark (layout.html), so these are its colours everywhere: the page, every surface below the window, the
   words, the lines. The page sits a little deeper than the window, so the window still stands out from it */
:root[data-theme="dark"] body.designers{
  --nf-page:#4A2418; --nf-page-hi:#54291C; --nf-page-lo:#401F14;
  --nf-surface:#572B1D; --nf-surface-soft:#603022; --nf-surface-muted:#6B3627; --nf-surface-light:#773D2C;
  --nf-ink:#F7EAE3; --nf-ink-strong:#FFF5EF; --nf-ink-secondary:#EBD3C7; --nf-ink-soft:#DDBFB1;
  --nf-ink-muted:#CFAE9F; --nf-ink-faint:#B8968A; --nf-ink-control:#F7EAE3; --nf-ink-control-hover:#FFF5EF;
  --nf-text-ghost:#8E6152; --nf-on-control:#4A2418;
  --nf-divider:#6E3D2B;
  --nf-glass:rgba(255,232,222,.07); --nf-glass-edge:rgba(255,232,222,.1); --nf-glass-lit:rgba(255,232,222,.12);
  --nf-hair:rgba(255,232,222,.12); --nf-leader:rgba(255,232,222,.2);
  --nf-shadow:rgba(30,8,2,.35); --nf-inner:rgba(255,232,222,.05)}
/* style.css washes the words into the surface once, on :root; the terracotta surface needs it done again here */
@supports (color:color-mix(in oklab,red,blue)){
  :root[data-theme="dark"] body.designers{
    --nf-text:color-mix(in oklab,var(--nf-surface) calc(var(--nf-haze)*var(--nf-haze-text)),var(--nf-ink));
    --nf-text-strong:color-mix(in oklab,var(--nf-surface) calc(var(--nf-haze)*var(--nf-haze-text)),var(--nf-ink-strong));
    --nf-text-secondary:color-mix(in oklab,var(--nf-surface) calc(var(--nf-haze)*var(--nf-haze-secondary)),var(--nf-ink-secondary));
    --nf-text-soft:color-mix(in oklab,var(--nf-surface) calc(var(--nf-haze)*var(--nf-haze-soft)),var(--nf-ink-soft));
    --nf-text-muted:color-mix(in oklab,var(--nf-surface) calc(var(--nf-haze)*var(--nf-haze-muted)),var(--nf-ink-muted));
    --nf-text-faint:color-mix(in oklab,var(--nf-surface) calc(var(--nf-haze)*var(--nf-haze-faint)),var(--nf-ink-faint));
    --nf-control:color-mix(in oklab,var(--nf-surface) calc(var(--nf-haze)*var(--nf-haze-control)),var(--nf-ink-control));
    --nf-control-hover:color-mix(in oklab,var(--nf-surface) calc(var(--nf-haze)*var(--nf-haze-control)*.5),var(--nf-ink-control-hover));
  }
}
/* the two parts style.css draws in fixed greys at night: the cards' icons and the scenes' panes */
:root[data-theme="dark"] body.designers .nfc-ico{background:color-mix(in oklab,var(--d-terra) 18%,var(--nf-surface-muted))}
:root[data-theme="dark"] body.designers .nfw-pane{background:var(--nf-surface-muted)}
/* the scenes' small pictures: the page's own dunes, deepened as the cards are, not the grey night picture */
:root[data-theme="dark"] body.designers .nfw-shot{background-image:url(/img/landscape-terracotta.webp);
  background-color:var(--side-deep);background-blend-mode:multiply}

/* the other designer-side pages in the same terracotta (Brody, 13 Oct 2026): pricing, the engine and the example.
   Their windows keep their fog landscape, in the terracotta dunes deepened as the cards are rather than the grey night
   picture, and the parts style.css draws in fixed greys at night take the terracotta surfaces instead */
:root[data-theme="dark"] body.designers .nfp-land .nf-land-img{display:none}
:root[data-theme="dark"] body.designers .nfp-land{background:url(/img/landscape-terracotta.webp) 50% 40%/cover no-repeat var(--side-deep);
  background-blend-mode:multiply;opacity:.9}
:root[data-theme="dark"] body.designers .nfp-plan,
:root[data-theme="dark"] body.designers .nfp-estimate,
:root[data-theme="dark"] body.designers .nfg-step{background:var(--nf-surface-soft)}
:root[data-theme="dark"] body.designers .nfp-plan.is-featured,
:root[data-theme="dark"] body.designers .nfg-record,
:root[data-theme="dark"] body.designers .nfx-quote,
:root[data-theme="dark"] body.designers .nfx-shot{background:var(--nf-surface-muted)}
:root[data-theme="dark"] body.designers .nfp-badge,
:root[data-theme="dark"] body.designers .nfx-draft,
:root[data-theme="dark"] body.designers .nfx-chips span{background:var(--nf-surface-light)}
:root[data-theme="dark"] body.designers .nfx-shot span{background:var(--nf-surface-soft)}
:root[data-theme="dark"] body.home.designers .nfp-form input,
:root[data-theme="dark"] body.home.designers .nfp-form select{background-color:var(--nf-surface-soft)}
:root[data-theme="dark"] body.designers .nfg-shot{background-image:url(/img/landscape-terracotta.webp);
  background-color:var(--side-deep);background-blend-mode:multiply}