/* ==========================================================================
   HangBo Alloy Group — deep colour themes
   Load AFTER main.css. Pick a palette with <html data-palette="emerald|navy|oxblood">
   ========================================================================== */

/* ---------- palette tokens ---------- */

html[data-palette="emerald"] {
  --ivory: #0e2a24;
  --paper: #143730;
  --sand: #0a201b;
  --sand-2: #17403a;
  --ink: #f3eee3;
  --ink-2: #dcd5c6;
  --muted: #a9a294;
  --muted-2: #b0aa9a;
  --line: rgba(243, 238, 227, 0.16);
  --line-soft: rgba(243, 238, 227, 0.1);
  --line-strong: rgba(243, 238, 227, 0.28);
  --bronze: #c8a24a;
  --bronze-2: #d9b76a;
  --bronze-soft: #8e7434;
  --espresso: #081b17;
  --on-accent: #14110b;
  --bg-rgb: 14, 42, 36;
}

html[data-palette="navy"] {
  --ivory: #10417a;
  --paper: #17508f;
  --sand: #0b2f5c;
  --sand-2: #1c5a9c;
  --ink: #f6f2e9;
  --ink-2: #e0dacc;
  --muted: #c6c8cb;
  --muted-2: #cfc9bb;
  --line: rgba(246, 242, 233, 0.2);
  --line-soft: rgba(246, 242, 233, 0.12);
  --line-strong: rgba(246, 242, 233, 0.34);
  --bronze: #e0b25c;
  --bronze-2: #eec474;
  --bronze-soft: #a97f3c;
  --espresso: #08203f;
  --on-accent: #14100c;
  --bg-rgb: 16, 65, 122;
}

html[data-palette="oxblood"] {
  --ivory: #25121a;
  --paper: #301922;
  --sand: #1b0d13;
  --sand-2: #3a1f29;
  --ink: #f6efe6;
  --ink-2: #e0d7ca;
  --muted: #b1a498;
  --muted-2: #b3a798;
  --line: rgba(246, 239, 230, 0.16);
  --line-soft: rgba(246, 239, 230, 0.1);
  --line-strong: rgba(246, 239, 230, 0.28);
  --bronze: #cba45a;
  --bronze-2: #dcb972;
  --bronze-soft: #907248;
  --espresso: #170a10;
  --on-accent: #17100b;
  --bg-rgb: 37, 18, 26;
}

/* ---------- surfaces that were hard-coded for the light theme ---------- */

.header {
  background: rgba(var(--bg-rgb), 0.92);
  border-bottom-color: var(--line-soft);
}

.anchor-nav {
  background: rgba(var(--bg-rgb), 0.95);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  background: var(--paper);
}

.field select option {
  background: var(--paper);
  color: var(--ink);
}

.split__media figcaption {
  color: var(--muted);
}

.hero__panel,
.family-card,
.form-item,
.process__step,
.app-item,
.news-card,
.news-featured,
.contact-card,
.social-item,
.table-wrap,
.family-block__meta div {
  box-shadow: none;
}

/* accent surfaces carry dark ink instead of white */

.btn--solid {
  color: var(--on-accent);
}

.cta-band .btn--solid {
  background: var(--espresso);
  border-color: var(--espresso);
  color: var(--ink);
}

.cta-band .btn--solid:hover {
  background: #000;
  border-color: #000;
  color: var(--ink);
}

.btn--solid:hover {
  color: var(--on-accent);
}

.app-item:hover,
.app-item:hover h4,
.app-item:hover p,
.app-item:hover .num-tag {
  color: var(--on-accent);
}

.cta-band {
  color: var(--on-accent);
}

.cta-band h2 {
  color: var(--on-accent);
}

.cta-band p,
.cta-band .eyebrow {
  color: rgba(20, 17, 11, 0.78);
  opacity: 1;
}

.cta-band .btn {
  border-color: rgba(20, 17, 11, 0.45);
  color: var(--on-accent);
}

.cta-band .btn:hover {
  background: var(--on-accent);
  color: var(--bronze-2);
  border-color: var(--on-accent);
}

/* footer sits one step below the page colour */

.footer {
  background: var(--espresso);
}

.footer h4 {
  color: var(--bronze);
}

.footer__wordmark {
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.13);
}

/* solid button sitting on the gold band: dark fill, cream label */
.cta-band .btn--solid,
.cta-band .btn--solid:hover {
  background: var(--espresso);
  border-color: var(--espresso);
  color: var(--ink);
}

.footer__wordmark {
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.17);
}

/* hero panel reads as a raised card on the coloured base */
html[data-palette] .hero__panel {
  background: var(--paper);
}

/* forms on the coloured base */
html[data-palette] .field input,
html[data-palette] .field select,
html[data-palette] .field textarea,
html[data-palette] .filter-input {
  background: var(--sand);
  border-color: var(--line);
  color: var(--ink);
}

html[data-palette] .field input::placeholder,
html[data-palette] .field textarea::placeholder,
html[data-palette] .filter-input::placeholder {
  color: rgba(246, 242, 233, 0.5);
}

html[data-palette] .field input:focus,
html[data-palette] .field select:focus,
html[data-palette] .field textarea:focus,
html[data-palette] .filter-input:focus {
  background: var(--sand-2);
  border-color: var(--bronze);
  color: var(--ink);
}

html[data-palette] .field select option {
  background: var(--paper);
  color: var(--ink);
}

/* graphite & platinum: pairs with the studio metal photography */
html[data-palette="graphite"] {
  --ivory: #1b1e21;
  --paper: #23272b;
  --sand: #15181a;
  --sand-2: #2b3035;
  --ink: #f3f0ea;
  --ink-2: #dbd6cc;
  --muted: #a9a49b;
  --muted-2: #b7b1a6;
  --line: rgba(243, 240, 234, 0.15);
  --line-soft: rgba(243, 240, 234, 0.09);
  --line-strong: rgba(243, 240, 234, 0.3);
  --bronze: #c79a5b;
  --bronze-2: #dab273;
  --bronze-soft: #8e6a3b;
  --espresso: #101315;
  --on-accent: #171410;
  --bg-rgb: 27, 30, 33;
}

/* stone & charcoal: light architectural alternative */
html[data-palette="stone"] {
  --ivory: #f2efe8;
  --paper: #fffefb;
  --sand: #e8e3d8;
  --sand-2: #ded8cb;
  --ink: #17191a;
  --ink-2: #33363a;
  --muted: #5f5c56;
  --muted-2: #6b675e;
  --line: rgba(23, 25, 26, 0.16);
  --line-soft: rgba(23, 25, 26, 0.09);
  --line-strong: rgba(23, 25, 26, 0.3);
  --bronze: #8b6335;
  --bronze-2: #a87a44;
  --bronze-soft: #c9a97e;
  --espresso: #17191a;
  --on-accent: #fffefb;
  --on-dark: #f4f1ea;
  --bg-rgb: 242, 239, 232;
}

/* the dark band and its button keep a cream label in every palette */
html[data-palette] .cta-band .btn--solid {
  color: #f4f1ea;
}

/* ---------- additional premium palettes ---------- */

/* burgundy & antique gold */
html[data-palette="burgundy"] {
  --ivory: #3b1a20;
  --paper: #481f27;
  --sand: #2c1216;
  --sand-2: #532630;
  --ink: #f6efe6;
  --ink-2: #e2d5c7;
  --muted: #c3aca4;
  --muted-2: #cbb6ad;
  --line: rgba(246, 239, 230, 0.17);
  --line-soft: rgba(246, 239, 230, 0.1);
  --line-strong: rgba(246, 239, 230, 0.32);
  --bronze: #cba24c;
  --bronze-2: #ddb765;
  --bronze-soft: #94713a;
  --espresso: #240e12;
  --on-accent: #1b1208;
  --bg-rgb: 59, 26, 32;
}

/* espresso & copper */
html[data-palette="espresso"] {
  --ivory: #2a221c;
  --paper: #352b23;
  --sand: #1f1915;
  --sand-2: #3f342a;
  --ink: #f4ece1;
  --ink-2: #ddcfbe;
  --muted: #b9a893;
  --muted-2: #c4b3a0;
  --line: rgba(244, 236, 225, 0.16);
  --line-soft: rgba(244, 236, 225, 0.09);
  --line-strong: rgba(244, 236, 225, 0.3);
  --bronze: #c08b53;
  --bronze-2: #d4a26a;
  --bronze-soft: #8c6338;
  --espresso: #1a140f;
  --on-accent: #1a120a;
  --bg-rgb: 42, 34, 28;
}

/* deep teal & brass */
html[data-palette="teal"] {
  --ivory: #0f3b3e;
  --paper: #144a4d;
  --sand: #0a2c2f;
  --sand-2: #1a5559;
  --ink: #f2efe6;
  --ink-2: #d9d8cc;
  --muted: #a9c0bd;
  --muted-2: #b6c9c6;
  --line: rgba(242, 239, 230, 0.17);
  --line-soft: rgba(242, 239, 230, 0.1);
  --line-strong: rgba(242, 239, 230, 0.32);
  --bronze: #c8a45c;
  --bronze-2: #daba74;
  --bronze-soft: #92753d;
  --espresso: #08272a;
  --on-accent: #171208;
  --bg-rgb: 15, 59, 62;
}

/* champagne & espresso (light luxe) */
html[data-palette="champagne"] {
  --ivory: #ede6d8;
  --paper: #fbf8f1;
  --sand: #e2d9c7;
  --sand-2: #d8cdb8;
  --ink: #221e18;
  --ink-2: #3a342b;
  --muted: #5f584c;
  --muted-2: #6b6355;
  --line: rgba(34, 30, 24, 0.17);
  --line-soft: rgba(34, 30, 24, 0.1);
  --line-strong: rgba(34, 30, 24, 0.32);
  --bronze: #8a6435;
  --bronze-2: #a87a44;
  --bronze-soft: #c2a377;
  --espresso: #241f18;
  --on-accent: #fbf8f1;
  --bg-rgb: 237, 230, 216;
}

/* warm taupe */
html[data-palette="taupe"] {
  --ivory: #2b2722;
  --paper: #363128;
  --sand: #201d18;
  --sand-2: #413b31;
  --ink: #f5f0e6;
  --ink-2: #ded4c4;
  --muted: #b5a894;
  --muted-2: #c2b5a2;
  --line: rgba(245, 240, 230, 0.16);
  --line-soft: rgba(245, 240, 230, 0.09);
  --line-strong: rgba(245, 240, 230, 0.3);
  --bronze: #c79a5b;
  --bronze-2: #d8ad70;
  --bronze-soft: #8e6c3c;
  --espresso: #1a1713;
  --on-accent: #1a130a;
  --bg-rgb: 43, 39, 34;
}

/* cool slate */
html[data-palette="slate"] {
  --ivory: #262c31;
  --paper: #2f363c;
  --sand: #1c2125;
  --sand-2: #384048;
  --ink: #f4f1ea;
  --ink-2: #d9d8d1;
  --muted: #a9b0b4;
  --muted-2: #b8bec1;
  --line: rgba(244, 241, 234, 0.16);
  --line-soft: rgba(244, 241, 234, 0.09);
  --line-strong: rgba(244, 241, 234, 0.3);
  --bronze: #c0a16a;
  --bronze-2: #d3b47c;
  --bronze-soft: #8b7245;
  --espresso: #161b1f;
  --on-accent: #171208;
  --bg-rgb: 38, 44, 49;
}

/* green grey */
html[data-palette="greengrey"] {
  --ivory: #232b26;
  --paper: #2c352f;
  --sand: #1a211d;
  --sand-2: #36403a;
  --ink: #f3f0e7;
  --ink-2: #dad9cd;
  --muted: #aab3a9;
  --muted-2: #b9c2b7;
  --line: rgba(243, 240, 231, 0.16);
  --line-soft: rgba(243, 240, 231, 0.09);
  --line-strong: rgba(243, 240, 231, 0.3);
  --bronze: #c8a96b;
  --bronze-2: #dabd7f;
  --bronze-soft: #8f7645;
  --espresso: #141a16;
  --on-accent: #161208;
  --bg-rgb: 35, 43, 38;
}

/* ---------- cool light palettes ---------- */

html[data-palette="coolwhite"] {
  --ivory: #f4f6f8;
  --paper: #ffffff;
  --sand: #e8edf1;
  --sand-2: #dde5eb;
  --ink: #16202a;
  --ink-2: #33414d;
  --muted: #5c6975;
  --muted-2: #56636f;
  --line: rgba(22, 32, 42, 0.14);
  --line-soft: rgba(22, 32, 42, 0.08);
  --line-strong: rgba(22, 32, 42, 0.26);
  --bronze: #2e5f86;
  --bronze-2: #3b729c;
  --bronze-soft: #7f9bb2;
  --espresso: #16232e;
  --on-accent: #ffffff;
  --bg-rgb: 244, 246, 248;
}

html[data-palette="silver"] {
  --ivory: #e7ecef;
  --paper: #fbfcfd;
  --sand: #dce3e7;
  --sand-2: #d2dade;
  --ink: #172027;
  --ink-2: #35414a;
  --muted: #56636d;
  --muted-2: #515d67;
  --line: rgba(23, 32, 39, 0.15);
  --line-soft: rgba(23, 32, 39, 0.08);
  --line-strong: rgba(23, 32, 39, 0.28);
  --bronze: #35586e;
  --bronze-2: #42697f;
  --bronze-soft: #8aa2b0;
  --espresso: #131e25;
  --on-accent: #ffffff;
  --bg-rgb: 231, 236, 239;
}

html[data-palette="bluegrey"] {
  --ivory: #dde5eb;
  --paper: #f5f8fa;
  --sand: #d1dce4;
  --sand-2: #c6d3dd;
  --ink: #14202a;
  --ink-2: #2f3d48;
  --muted: #4f5c67;
  --muted-2: #4b5862;
  --line: rgba(20, 32, 42, 0.16);
  --line-soft: rgba(20, 32, 42, 0.09);
  --line-strong: rgba(20, 32, 42, 0.3);
  --bronze: #24506e;
  --bronze-2: #2f6385;
  --bronze-soft: #7e99ab;
  --espresso: #101c25;
  --on-accent: #ffffff;
  --bg-rgb: 221, 229, 235;
}

/* the closing band goes dark on the light palettes */
:is([data-palette="coolwhite"], [data-palette="silver"], [data-palette="bluegrey"]) .cta-band {
  background: var(--espresso);
  color: #f3f7f9;
}

:is([data-palette="coolwhite"], [data-palette="silver"], [data-palette="bluegrey"]) .cta-band h2 {
  color: #f7fafc;
}

:is([data-palette="coolwhite"], [data-palette="silver"], [data-palette="bluegrey"]) .cta-band .eyebrow,
:is([data-palette="coolwhite"], [data-palette="silver"], [data-palette="bluegrey"]) .cta-band p {
  color: rgba(243, 247, 249, 0.82);
}

:is([data-palette="coolwhite"], [data-palette="silver"], [data-palette="bluegrey"]) .cta-band .btn {
  border-color: rgba(243, 247, 249, 0.55);
  color: #f7fafc;
}

:is([data-palette="coolwhite"], [data-palette="silver"], [data-palette="bluegrey"]) .cta-band .btn--solid {
  background: #f2f6f8;
  border-color: #f2f6f8;
  color: #14202a;
}

/* light slate grey */
html[data-palette="lightslate"] {
  --ivory: #cfd8dd;
  --paper: #e9eff2;
  --sand: #c3ced4;
  --sand-2: #b8c4cb;
  --ink: #14202a;
  --ink-2: #2c3a44;
  --muted: #46545f;
  --muted-2: #44515b;
  --line: rgba(20, 32, 42, 0.18);
  --line-soft: rgba(20, 32, 42, 0.1);
  --line-strong: rgba(20, 32, 42, 0.32);
  --bronze: #1f4a66;
  --bronze-2: #2a5c7c;
  --bronze-soft: #6d8798;
  --espresso: #101c25;
  --on-accent: #ffffff;
  --bg-rgb: 207, 216, 221;
}

/* brighter light slate: the live palette */
html[data-palette="lightslate"] {
  --ivory: #e6eef4;
  --paper: #f8fbfd;
  --sand: #dae5ec;
  --sand-2: #cddae3;
  --ink: #14202a;
  --ink-2: #2c3a44;
  --muted: #46545f;
  --muted-2: #44515b;
  --line: rgba(20, 32, 42, 0.16);
  --line-soft: rgba(20, 32, 42, 0.09);
  --line-strong: rgba(20, 32, 42, 0.3);
  --bronze: #1f4a66;
  --bronze-2: #2a5c7c;
  --bronze-soft: #6d8798;
  --espresso: #101c25;
  --on-accent: #ffffff;
  --bg-rgb: 230, 238, 244;
}

/* pearl grey: neutral cool, never white */
html[data-palette="pearl"] {
  --ivory: #d9dde2;
  --paper: #fbfcfd;
  --sand: #c8cfd5;
  --sand-2: #bcc5cc;
  --ink: #14181c;
  --ink-2: #2b3238;
  --muted: #454f57;
  --muted-2: #414b53;
  --line: rgba(20, 24, 28, 0.17);
  --line-soft: rgba(20, 24, 28, 0.09);
  --line-strong: rgba(20, 24, 28, 0.31);
  --bronze: #244e68;
  --bronze-2: #2f617f;
  --bronze-soft: #71899a;
  --espresso: #10171d;
  --on-accent: #ffffff;
  --bg-rgb: 217, 221, 226;
}

/* a whisper of paper grain so the flat fill reads as material, not screen */
html[data-palette="pearl"] body {
  background-image: radial-gradient(rgba(20, 24, 28, 0.05) 0.5px, transparent 0.6px);
  background-size: 3px 3px;
  background-attachment: fixed;
}

/* the big hero panel carries the base tone, not white */
html[data-palette="pearl"] {
  --ivory: #d2d7dc;
  --sand: #c2c9d0;
  --sand-2: #b6bec6;
  --bg-rgb: 210, 215, 220;
}

html[data-palette] .hero__panel {
  background: var(--ivory);
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px rgba(16, 23, 29, 0.18);
}

/* stronger tonal step between bands */
html[data-palette="pearl"] {
  --sand: #bcc5cc;
  --sand-2: #b2bcc4;
}

/* ---------- multi-tone surfaces ---------- */
html[data-palette="pearl"] {
  --ivory: #dde4e9;
  --sand: #c9d6df;
  --sand-2: #bfced9;
  --bg-rgb: 221, 228, 233;
}

/* ==========================================================================
   Palette: platinum + graphite + gold
   Light platinum page, graphite anchor bands, champagne-gold accent.
   ========================================================================== */

html[data-palette="platinum"] {
  --ivory: #e7e5e0;
  --paper: #f6f4f0;
  --sand: #d2cec4;
  --sand-2: #c7c2b8;
  --ink: #17191b;
  --ink-2: #2c3033;
  --muted: #54575b;
  --muted-2: #5b5f63;
  --bronze: #7f602c;
  --bronze-2: #96753a;
  --bronze-soft: #c3ab80;
  --espresso: #1b1d1f;
  --on-accent: #f8f6f2;
  --line: #c9c5bc;
  --line-soft: #ded9d0;
  --line-strong: #aaa69c;
  --bg-rgb: 231, 229, 224;
}

/* ---------- header: graphite frame ---------- */

html[data-palette="platinum"] .header {
  background: rgba(22, 24, 26, 0.94);
  border-bottom: 1px solid rgba(238, 235, 228, 0.12);
}

html[data-palette="platinum"] .header.is-stuck {
  background: rgba(18, 20, 22, 0.97);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38);
}

html[data-palette="platinum"] .header .menu-btn,
html[data-palette="platinum"] .header .icon-link {
  color: #ece9e2;
}

html[data-palette="platinum"] .header .brand__sub {
  color: #b9b5ab;
}

html[data-palette="platinum"] .header .brand__divider {
  background: rgba(238, 235, 228, 0.22);
}

html[data-palette="platinum"] .header__cta {
  background: #c9a463;
  border-color: #c9a463;
  color: #17191b;
}

html[data-palette="platinum"] .header__cta:hover {
  background: #dcbd85;
  border-color: #dcbd85;
  color: #17191b;
}

/* ---------- hero: dark photo, platinum panel ---------- */

html[data-palette="platinum"] .hero__panel {
  background: #edeae4;
  border: 1px solid var(--line-strong);
  box-shadow: 0 26px 60px rgba(24, 26, 28, 0.28);
}

/* ---------- band tones ---------- */

html[data-palette="platinum"] .section--light {
  background: #f8f6f2;
}

html[data-palette="platinum"] .section--ink {
  background: #23272a;
  color: #eef1f4;
  --bronze: #cbab72;
  --bronze-2: #ddc08d;
  --line: rgba(238, 241, 244, 0.16);
  --muted: #b3b9bf;
}

html[data-palette="platinum"] .section--ink h2 {
  color: #f6f8fa;
}

html[data-palette="platinum"] .section--ink p,
html[data-palette="platinum"] .section--ink .section-head p {
  color: rgba(238, 241, 244, 0.8);
}

html[data-palette="platinum"] .section--ink .eyebrow {
  color: #cbab72;
}

html[data-palette="platinum"] .section--ink .section-head {
  border-color: rgba(238, 241, 244, 0.18);
}

html[data-palette="platinum"] .section--ink .cert {
  background: #2b3034;
  border-color: rgba(238, 241, 244, 0.16);
}

html[data-palette="platinum"] .section--ink .cert figcaption h4 {
  color: #f6f8fa;
}

html[data-palette="platinum"] .section--ink .cert figcaption p,
html[data-palette="platinum"] .section--ink .cert-note {
  color: rgba(238, 241, 244, 0.74);
}

/* ---------- cta band: graphite slab, gold button ---------- */

html[data-palette="platinum"] .cta-band {
  background: linear-gradient(112deg, #1a1c1e 0%, #25292d 56%, #1c1f21 100%);
  color: #eef1f4;
  border-top: 1px solid rgba(201, 164, 99, 0.4);
  --bronze: #c9a463;
  --bronze-2: #dcbd85;
  --on-accent: #17191b;
}

html[data-palette="platinum"] .cta-band::after {
  background: radial-gradient(65% 130% at 100% 0%, rgba(201, 164, 99, 0.15), transparent 62%);
}

html[data-palette="platinum"] .cta-band .eyebrow {
  color: #c9a463;
  opacity: 1;
}

html[data-palette="platinum"] .cta-band h2 {
  color: #f6f8fa;
}

html[data-palette="platinum"] .cta-band p {
  color: rgba(238, 241, 244, 0.76);
}

html[data-palette="platinum"] .cta-band .btn {
  border-color: rgba(238, 241, 244, 0.42);
  color: #eef1f4;
}

html[data-palette="platinum"] .cta-band .btn:hover {
  background: rgba(238, 241, 244, 0.1);
  border-color: #eef1f4;
  color: #eef1f4;
}

html[data-palette="platinum"] .cta-band .btn--solid {
  background: #c9a463;
  border-color: #c9a463;
  color: #17191b;
}

html[data-palette="platinum"] .cta-band .btn--solid:hover {
  background: #dcbd85;
  border-color: #dcbd85;
  color: #17191b;
}

/* ---------- footer ---------- */

html[data-palette="platinum"] .footer {
  background: #131517;
}

/* ---------- primary buttons on the light page ---------- */

html[data-palette="platinum"] .btn--solid {
  background: #c29a58;
  border-color: #c29a58;
  color: #17191b;
}

html[data-palette="platinum"] .btn--solid:hover {
  background: #d3b072;
  border-color: #d3b072;
  color: #17191b;
}

/* ---------- light form surfaces (override the legacy dark-palette rules) ---------- */

html[data-palette="platinum"] .field input,
html[data-palette="platinum"] .field select,
html[data-palette="platinum"] .field textarea,
html[data-palette="platinum"] .filter-input {
  background: #f7f5f1;
  border-color: var(--line-strong);
  color: var(--ink);
}

html[data-palette="platinum"] .field input::placeholder,
html[data-palette="platinum"] .field textarea::placeholder,
html[data-palette="platinum"] .filter-input::placeholder {
  color: #6c6f73;
}

html[data-palette="platinum"] .field input:focus,
html[data-palette="platinum"] .field select:focus,
html[data-palette="platinum"] .field textarea:focus,
html[data-palette="platinum"] .filter-input:focus {
  background: #fdfcfa;
  border-color: var(--bronze);
}

html[data-palette="platinum"] .field select option {
  background: #f7f5f1;
  color: var(--ink);
}