/* Navy & mineraalblauw (27 Oct 2026; default for every build since 28 Oct 2026). The build puts
   data-mineral-preview on <html> of every page and loads this file after theme.css and all page
   styles. node site/build.mjs --classic leaves both out. Without the root marker nothing in this
   file applies.

   Three colours with one role each (decision 28 Oct 2026): navy is the page, gold stays the brand
   colour (eyebrow labels, numbers, prices, process circles, list bullets, the hero arc, halo and
   hairlines, the emblem sign and the sign-off line) and the mineral tokens (--mp-*) are only for
   actions: the primary button, the active language switch, links, the highlighted line in the
   headline and the FAQ accents. Logo images and the WebGL emblem are not touched. The star field is
   the live one: emblem3d.js keeps its quiet profile in the code but switched off (quiet = false).

   Cascade note: most rules are written as ":root[data-mineral-preview] <original selector>". That is
   one attribute selector heavier than the dark rules and equal to the light rules in theme.css, which
   this file follows in source order, so a single token-driven rule covers both themes. Element-level
   defaults use :where() so component rules keep winning. */

:root[data-mineral-preview]{
  --mp-page:#061420;--mp-elevated:#0C1E2B;--mp-card:#102534;--mp-field:#0A1B28;
  --mp-border:#2B4251;--mp-control:#607B8C;--mp-control-hover:#95A8B4;
  --mp-text:#F3F0E9;--mp-text-2:#C0CBD1;--mp-muted:#95A8B4;
  --mp-action:#82B9D4;--mp-action-hover:#A1CDE1;--mp-action-active:#82B9D4;--mp-action-text:#061420;
  --mp-link:#9FCDE3;--mp-eyebrow:#E4C48E;--mp-heading:#AAC7D8;--mp-icon:#A8C2D2;--mp-focus:#C0E4F5;
  --mp-brand:#E4C48E;--mp-halo:#82B9D414;--mp-shadow:0 24px 60px #01070c66;--mp-error-control:#e08a7a;
  /* The existing tokens follow the new scale; --gold keeps its original brand value. */
  --navy:var(--mp-page);--raised:var(--mp-elevated);--white:var(--mp-text);--silver:var(--mp-text-2);--muted:var(--mp-muted);--line:var(--mp-border)
}
:root[data-mineral-preview][data-theme="light"]{
  --mp-page:#F4F1EA;--mp-elevated:#ECE8DE;--mp-card:#FFFCF6;--mp-field:#FFFFFF;
  --mp-border:#D3CBBE;--mp-control:#898277;--mp-control-hover:#58636A;
  --mp-text:#18232A;--mp-text-2:#46545C;--mp-muted:#58636A;
  --mp-action:#213F51;--mp-action-hover:#162E3D;--mp-action-active:#162E3D;--mp-action-text:#FBF7EE;
  --mp-link:#24566E;--mp-eyebrow:#78603D;--mp-heading:#213F51;--mp-icon:#52656E;--mp-focus:#245B7A;
  --mp-brand:#795621;--mp-halo:#213F510F;--mp-shadow:0 18px 40px #18232a14;--mp-error-control:#9b2f1f;
  --navy:var(--mp-page);--raised:var(--mp-elevated);--white:var(--mp-text);--silver:var(--mp-text-2);--muted:var(--mp-muted);--line:var(--mp-border)
}

/* ---------- Page, text, links, focus ---------- */
:root[data-mineral-preview] .site-layout{background:var(--mp-page)}
/* Element defaults stay outside the fictional platform app (.pfd-app),
   so their own palettes and interaction states keep applying there. */
:where(:root[data-mineral-preview]) a:where(:not(.pfd-app *)){color:var(--mp-link)}
:where(:root[data-mineral-preview]) a:where(:not(.pfd-app *)):hover{color:var(--mp-text)}
:where(:root[data-mineral-preview]) :where(:not(.pfd-app *)):focus-visible{outline:2px solid var(--mp-focus);outline-offset:3px}
:where(:root[data-mineral-preview]) button:where(:not(.pfd-app *)):disabled{opacity:1;color:var(--mp-muted);border-color:var(--mp-border)}
:root[data-mineral-preview] .skip{background:var(--mp-action);color:var(--mp-action-text)}
:root[data-mineral-preview] .eyebrow{color:var(--mp-eyebrow)}
@container (max-width:420px){:root[data-mineral-preview] .eyebrow{font-size:12px;letter-spacing:.1em}}

/* ---------- Header ---------- */
:root[data-mineral-preview] .site-nav a:hover,:root[data-mineral-preview] .nav-menu summary:hover{color:var(--mp-action-hover)}
:root[data-mineral-preview] .site-nav a[aria-current="page"]{color:var(--mp-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
:root[data-mineral-preview] .site-nav .contact-link{border-color:var(--mp-control)}
:root[data-mineral-preview] .site-nav .contact-link:hover{border-color:var(--mp-action);background:var(--mp-halo)}
:root[data-mineral-preview] .nav-menu summary:after{color:var(--mp-icon)}
:root[data-mineral-preview] .nav-popover{background:var(--mp-card);border-color:var(--mp-border);box-shadow:var(--mp-shadow)}
:root[data-mineral-preview] .language-switch,:root[data-mineral-preview] .theme-toggle{border-color:var(--mp-control)}
:root[data-mineral-preview] .language-switch a:not([aria-current]):hover{color:var(--mp-text);background:var(--mp-halo)}
:root[data-mineral-preview] .language-switch a[aria-current]{background:var(--mp-action);color:var(--mp-action-text)}
:root[data-mineral-preview] .theme-toggle{color:var(--mp-text-2)}
:root[data-mineral-preview] .theme-toggle:hover{color:var(--mp-text);border-color:var(--mp-action);background:var(--mp-halo)}

/* ---------- Buttons: one primary action, neutral secondary, underlined text links ---------- */
:root[data-mineral-preview] .button{border-color:var(--mp-control);color:var(--mp-text)}
:root[data-mineral-preview] .button:hover{border-color:var(--mp-control-hover);color:var(--mp-text);background:var(--mp-halo)}
:root[data-mineral-preview] .button.gold{background:var(--mp-action);border-color:var(--mp-action);color:var(--mp-action-text)}
:root[data-mineral-preview] .button.gold:hover{background:var(--mp-action-hover);border-color:var(--mp-action-hover);color:var(--mp-action-text)}
:root[data-mineral-preview] .button.gold:active{background:var(--mp-action-active);border-color:var(--mp-action-active)}
:root[data-mineral-preview] .button.gold:focus-visible,:root[data-mineral-preview] .language-switch a[aria-current]:focus-visible{box-shadow:0 0 0 3px var(--mp-page)}
:root[data-mineral-preview] .button.plain{color:var(--mp-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
:root[data-mineral-preview] .button.plain:hover{background:none;color:var(--mp-text)}

/* ---------- Labels and accent lines. Numbers, prices, process circles and list bullets stay gold (brand); mineral is for actions and links ---------- */
:root[data-mineral-preview] .step-list li:before,:root[data-mineral-preview] .ai-route-label,:root[data-mineral-preview] .intake-step-label,:root[data-mineral-preview] .ld-sources thead th,:root[data-mineral-preview] .ld-input figcaption{color:var(--mp-eyebrow)}
:root[data-mineral-preview] .sample-label{color:var(--mp-eyebrow)!important}
:root[data-mineral-preview] .about-home .about-signoff{color:var(--mp-heading)!important}
:root[data-mineral-preview] .copy-row p{color:var(--mp-heading)}
:root[data-mineral-preview] .scope-note,:root[data-mineral-preview] .lab-note,:root[data-mineral-preview] .lab-aside,:root[data-mineral-preview] .website-seo-note,:root[data-mineral-preview] .ai-route-for,:root[data-mineral-preview] .ld-scenario,:root[data-mineral-preview] .ld-input{border-left-color:var(--mp-heading)}
:root[data-mineral-preview] .ld-flow-marker{border-color:var(--mp-control);background:var(--mp-page);color:var(--mp-heading)}
:root[data-mineral-preview] .ld-flow:before{background:var(--mp-border)}
:root[data-mineral-preview] .ld-flow .is-pilot .ld-flow-marker{border-color:var(--mp-control);color:var(--mp-text-2)}
:root[data-mineral-preview] .demo-status:before,:root[data-mineral-preview] .sc-note:before,:root[data-mineral-preview] .sc-status:before{background:var(--mp-icon)}
:root[data-mineral-preview] .sc-status[data-kind="concept"]:before{background:transparent;border-color:var(--mp-text-2)}
:root[data-mineral-preview] .website-package-features li::before,:root[data-mineral-preview] .ai-route .ai-checks li:before{border-color:var(--mp-icon)}
:root[data-mineral-preview] .contact-email{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--mp-control);text-underline-offset:.18em}
:root[data-mineral-preview] .ld-parent{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
/* Signature champagne details stay (brand, not UI accent). */
:root[data-mineral-preview] .he-sign span,:root[data-mineral-preview] .ai-emblem-sign span{background:var(--mp-brand)}
:root[data-mineral-preview] .about-home .about-signoff:before{background:linear-gradient(90deg,var(--mp-brand),transparent)}

/* ---------- Homepage: the hero keeps the live night sky, gold halo and hairline arc; only text and actions change ---------- */
:root[data-mineral-preview] .hero h1{color:var(--mp-text)}
:root[data-mineral-preview] .mp-highlight{color:var(--mp-heading);text-shadow:none}
/* The gold/dark hero gradients and the hairline arc stay off; the star canvas itself keeps its original
   placement (absolute, pointer-events:none, clipped by .site-layout). */
:root[data-mineral-preview] .he-sign{color:var(--mp-text-2)}
/* Sections under the hero (home-depth.css): flat page, raised bands, thin borders, no gold hairlines. */
:root[data-mineral-preview] .promises{border-top-color:var(--mp-border);background:var(--mp-elevated)}
:root[data-mineral-preview] .lab-aside{background:var(--mp-card);border-color:var(--mp-border);border-left-color:var(--mp-heading);box-shadow:none}
:root[data-mineral-preview] .faq details[open]{border-bottom-color:var(--mp-control)}
:root[data-mineral-preview] .faq details[open] summary{color:var(--mp-heading)}
:root[data-mineral-preview] .faq summary:hover{color:var(--mp-action-hover)}
:root[data-mineral-preview] .faq summary:after{color:var(--mp-icon)}
:root[data-mineral-preview] #contact .contact-block{border-color:var(--mp-border);background:var(--mp-card);box-shadow:var(--mp-shadow)}
:root[data-mineral-preview] .site-footer{border-top-color:var(--mp-border);background:none}
:root[data-mineral-preview] .site-footer nav a:hover{color:var(--mp-link)}
/* Showcase cards */
:root[data-mineral-preview] .showcase{background:none}
:root[data-mineral-preview] .sc-card{border-color:var(--mp-border);background:var(--mp-card);box-shadow:var(--mp-shadow)}
:root[data-mineral-preview] .sc-card:after{background:var(--mp-page)}
:root[data-mineral-preview] .sc-card[data-sc-state="active"]{border-color:var(--mp-control)}
:root[data-mineral-preview] .sc-status{border-color:var(--mp-border);background:var(--mp-elevated)}
:root[data-mineral-preview] .sc-frame{border-color:var(--mp-border);background:var(--mp-elevated);box-shadow:var(--mp-shadow)}
:root[data-mineral-preview] .sc-card:hover .sc-frame{border-color:var(--mp-control)}
:root[data-mineral-preview].js .sc-card[data-sc-state="active"] .sc-frame{box-shadow:var(--mp-shadow)}
:root[data-mineral-preview] .sc-frame-bar{background:var(--mp-elevated);border-bottom-color:var(--mp-border)}
:root[data-mineral-preview] .sc-prices,:root[data-mineral-preview] .sc-process,:root[data-mineral-preview] .sc-coach{background:var(--mp-elevated);border-color:var(--mp-border)}
:root[data-mineral-preview] .sc-rail a:before{background:var(--mp-action)}
:root[data-mineral-preview] .sc-rail a[aria-current="location"] .sc-rail-num{color:var(--mp-heading)}
:root[data-mineral-preview] .sc-rail-num{opacity:1}

/* ---------- Shared sections on the other pages ---------- */
:root[data-mineral-preview] .spotlight,:root[data-mineral-preview] .ld-example,:root[data-mineral-preview] .ld-pilot{background:var(--mp-elevated)}
:root[data-mineral-preview] .sample{background:var(--mp-card)}
:root[data-mineral-preview] .demo-card-label{color:var(--mp-link)}
:root[data-mineral-preview] .demo-card-media,:root[data-mineral-preview] .demo-frame{border-color:var(--mp-border);background:var(--mp-elevated);box-shadow:var(--mp-shadow)}
:root[data-mineral-preview] .demo-card:hover .demo-card-media,:root[data-mineral-preview] a.demo-frame:hover{border-color:var(--mp-control)}
/* Websites / packages */
:root[data-mineral-preview] .website-package{background:var(--mp-card);border-color:var(--mp-border)}
/* AI assistants */
:root[data-mineral-preview] .ai-emblem:before{background:radial-gradient(ellipse at 55% 45%,var(--mp-halo),transparent 62%)}
:root[data-mineral-preview][data-theme="light"] .ai-emblem:before{background:none}
:root[data-mineral-preview] .ai-route{background:var(--mp-card);border-color:var(--mp-border)}
/* Leadership coach */
:root[data-mineral-preview] .ld-dialogue{border-color:var(--mp-border);background:var(--mp-card);box-shadow:var(--mp-shadow)}
:root[data-mineral-preview] .ld-dialogue:before{border-color:var(--mp-border)}
:root[data-mineral-preview] .ld-message{border-color:var(--mp-border);background:var(--mp-elevated)}
:root[data-mineral-preview] .ld-coach{border-color:var(--mp-control);background:var(--mp-halo)}
:root[data-mineral-preview] .ld-coach .ld-speaker{color:var(--mp-heading)}
:root[data-mineral-preview] .ld-features .ld-card{background:var(--mp-card);border-color:var(--mp-border)}
:root[data-mineral-preview] .ld-pilot-steps li{border-top-color:var(--mp-border)}
:root[data-mineral-preview] .ld-lenses{background:var(--mp-card);border-color:var(--mp-border)}
:root[data-mineral-preview] .ld-lenses li:hover{background:var(--mp-halo)}
:root[data-mineral-preview] .ld-input{background:var(--mp-elevated)}
:root[data-mineral-preview] .ld-review{background:var(--mp-card);color:var(--mp-text)}
:root[data-mineral-preview] .ld-checks{border-top-color:var(--mp-border)}
:root[data-mineral-preview] .ld-checks li{border-color:var(--mp-control)}
/* The example preparation is a paper document in both themes; its gold-brown labels turn slate.
   The orange "assumptions" label is content meaning and stays. The review block sits inside the
   paper on a dark card, so its label override must come last. */
:root[data-mineral-preview] .ld-preparation dt span,:root[data-mineral-preview] .ld-preparation .ld-paper-label{color:#46545C!important}
:root[data-mineral-preview] .ld-compare .ld-compare-assume .ld-paper-label{color:#9a4f1f!important}
:root[data-mineral-preview] .ld-review .ld-paper-label{color:var(--mp-eyebrow)!important}

/* ---------- Intake: visual styling only ---------- */
:root[data-mineral-preview] .intake{background:var(--mp-card);border-color:var(--mp-border);box-shadow:var(--mp-shadow)}
:root[data-mineral-preview] .intake-noscript{background:var(--mp-elevated)}
:root[data-mineral-preview] .intake-progress li{border-bottom-color:var(--mp-border)}
:root[data-mineral-preview] .intake-progress li[data-state="current"]{color:var(--mp-text);border-color:var(--mp-action)}
:root[data-mineral-preview] .intake-progress li[data-state="current"] .intake-progress-num{color:var(--mp-heading)}
:root[data-mineral-preview] .intake-progress li[data-state="done"]{color:var(--mp-text-2);border-color:var(--mp-control)}
:root[data-mineral-preview] .intake-step-heading:focus-visible{outline:2px solid var(--mp-focus);outline-offset:6px}
:root[data-mineral-preview] .intake-choice{background:var(--mp-elevated);border-color:var(--mp-control)}
:root[data-mineral-preview] .intake-choice:hover{border-color:var(--mp-control-hover)}
:root[data-mineral-preview] .intake-choice:has(input:focus-visible){outline:2px solid var(--mp-focus);outline-offset:3px}
:root[data-mineral-preview] .intake-choice:has(input:checked){border-color:var(--mp-action);background:var(--mp-halo)}
:root[data-mineral-preview] .intake-choice-body:before{border-color:var(--mp-control)}
:root[data-mineral-preview] .intake-choice:has(input:checked) .intake-choice-body:before{border-color:var(--mp-action);background:var(--mp-action);box-shadow:inset 0 0 0 4px var(--mp-page)}
:root[data-mineral-preview] .intake-option{border-color:var(--mp-control);color:var(--mp-text)}
:root[data-mineral-preview] .intake-option:hover{border-color:var(--mp-control-hover)}
:root[data-mineral-preview] .intake-option:has(input:checked){border-color:var(--mp-action);background:var(--mp-halo)}
:root[data-mineral-preview] .intake-option:has(input:focus-visible){outline:2px solid var(--mp-focus);outline-offset:3px}
:root[data-mineral-preview] .intake-option input,:root[data-mineral-preview] .mgd-option input{accent-color:var(--mp-action)}
:root[data-mineral-preview] .intake input[type="text"],:root[data-mineral-preview] .intake input[type="email"],:root[data-mineral-preview] .intake input[type="tel"],:root[data-mineral-preview] .intake input[type="url"],:root[data-mineral-preview] .intake textarea{border-color:var(--mp-control);background:var(--mp-field);color:var(--mp-text)}
:root[data-mineral-preview] .intake input:focus-visible,:root[data-mineral-preview] .intake textarea:focus-visible{outline:2px solid var(--mp-focus);outline-offset:3px;border-color:var(--mp-control);box-shadow:none}
/* Error state: semantic error border per theme (dark keeps intake.css #e08a7a, light uses the existing light error text colour #9b2f1f); the focus outline above stays visible on top of it. */
:root[data-mineral-preview] .intake .is-invalid input,:root[data-mineral-preview] .intake .is-invalid textarea,:root[data-mineral-preview] .intake .is-invalid .intake-option{border-color:var(--mp-error-control)}
:root[data-mineral-preview] .intake-error-summary:focus-visible{outline:2px solid var(--mp-focus);outline-offset:3px}
:root[data-mineral-preview] .intake-summary{background:var(--mp-elevated);border-color:var(--mp-border)}
:root[data-mineral-preview] .intake-edit{color:var(--mp-link)}
:root[data-mineral-preview] .intake-edit:hover{color:var(--mp-text)}
:root[data-mineral-preview] .intake-success{border-color:var(--mp-control);background:var(--mp-card)}
:root[data-mineral-preview] .intake-aside{background:var(--mp-card);border-color:var(--mp-border)}

/* ---------- Management demo: follows the Meyzal tokens; the "complete" state keeps its own colour ---------- */
:root[data-mineral-preview] .mgd{--mgd-navy:var(--mp-page);--mgd-raised:var(--mp-elevated);--mgd-white:var(--mp-text);--mgd-silver:var(--mp-text-2);--mgd-muted:var(--mp-muted);--mgd-gold:var(--mp-action);--mgd-line:var(--mp-border);background:var(--mp-card)}
:root[data-mineral-preview] .mgd button:focus-visible,:root[data-mineral-preview] .mgd a:focus-visible,:root[data-mineral-preview] .mgd input:focus-visible,:root[data-mineral-preview] .mgd summary:focus-visible,:root[data-mineral-preview] .mgd [tabindex]:focus-visible{outline:2px solid var(--mp-focus);outline-offset:3px}
:root[data-mineral-preview] .mgd-eyebrow{color:var(--mp-eyebrow)!important}
:root[data-mineral-preview] .mgd-badge{color:var(--mp-heading)}
:root[data-mineral-preview] .mgd-badge>span{background:var(--mp-icon)}
:root[data-mineral-preview] .mgd-path li>span,:root[data-mineral-preview] .mgd-card-heading>span,:root[data-mineral-preview] .mgd-answer-review dt{color:var(--mp-eyebrow)}
:root[data-mineral-preview] .mgd-scenario{border-left-color:var(--mp-heading)}
:root[data-mineral-preview] .mgd-primary{background:var(--mp-action);border-color:var(--mp-action);color:var(--mp-action-text)!important}
:root[data-mineral-preview] .mgd-primary:hover{background:var(--mp-action-hover);border-color:var(--mp-action-hover)}
:root[data-mineral-preview] .mgd-secondary{background:var(--mp-elevated);border-color:var(--mp-control);color:var(--mp-text)!important}
:root[data-mineral-preview] .mgd-secondary:hover{background:var(--mp-halo);border-color:var(--mp-control-hover)}
:root[data-mineral-preview] .mgd-button:disabled{background:var(--mp-elevated);border-color:var(--mp-border);color:var(--mp-muted)!important}
:root[data-mineral-preview] .mgd-intro-aside,:root[data-mineral-preview] .mgd-answer-review{background:var(--mp-elevated)}
:root[data-mineral-preview] .mgd-progress-number{border-color:var(--mp-control)}
:root[data-mineral-preview] .mgd-current .mgd-progress-number{background:var(--mp-action);border-color:var(--mp-action);color:var(--mp-action-text)}
:root[data-mineral-preview] .mgd-option{background:var(--mp-elevated);border-color:var(--mp-control)}
:root[data-mineral-preview] .mgd-option:hover{background:var(--mp-halo);border-color:var(--mp-control-hover)}
:root[data-mineral-preview] .mgd-option.mgd-selected{background:var(--mp-halo);border-color:var(--mp-action);box-shadow:inset 0 0 0 1px var(--mp-action)}
:root[data-mineral-preview] .mgd-route{border-color:var(--mp-control);background:var(--mp-halo);color:var(--mp-heading)!important}
:root[data-mineral-preview] .mgd-result-card{background:var(--mp-elevated);border-color:var(--mp-border)}
:root[data-mineral-preview] .mgd-result-opening{background:var(--mp-elevated);border-color:var(--mp-control)}
:root[data-mineral-preview] .mgd-cta{background:var(--mp-elevated);border-color:var(--mp-border)}

/* ---------- Platform demo: Meyzal text and closing call to action around the fictional app ---------- */
:root[data-mineral-preview] .pfd-widget{color:var(--mp-text)}
:root[data-mineral-preview] .pfd-intro p,:root[data-mineral-preview] .pfd-disclosure p,:root[data-mineral-preview] .pfd-outro p{color:var(--mp-text-2)}
:root[data-mineral-preview] .pfd-intro .pfd-demo-label{color:var(--mp-eyebrow)}
:root[data-mineral-preview] .pfd-app{border-color:var(--mp-control)}
:root[data-mineral-preview] .pfd-outro{border-top-color:var(--mp-border)}
:root[data-mineral-preview] .pfd-outro h2{color:var(--mp-text)}
:root[data-mineral-preview] .pfd-outro .pfd-button-gold{background:var(--mp-action);border-color:var(--mp-action);color:var(--mp-action-text)!important}
:root[data-mineral-preview] .pfd-outro a:focus-visible{outline:2px solid var(--mp-focus);outline-offset:3px}