/* Backcomhub landing: the dark themes. Same pages, same markup, same logic as the light ones; only
   the colours change. Each theme sets tokens only; the shared rules below (scoped to
   <html data-bh-tone="dark">, set by LandingKitService) turn the light-only colours of landing.css
   (the champagne phone, the ivory screen, the journey's paper model) into their dark counterparts.

     onyx     graphite and gold, a green up colour (a trading terminal)
     abyss    deep navy and electric blue, a cyan up colour (a modern fintech app)
     emerald  black-green and emerald, a gold second colour (private banking)

   Tokens of the shared rules besides the kit's --p-* and landing.css's --bh-*:
     --bh-hi / --bh-hi-2 / --bh-hi-3   the highlight (journey light, CTA) and its two gradient ends
     --bh-hi-ink                       text on the highlight
     --bh-up                           a rising candle, a gain
     --bh-gold                         the payout's gold
     --bh-raise                        a surface lifted off the page (inputs, captions, the receipt)
     --bh-screen                       the phone's screen
     --bh-metal-1..3                   the phone's shell, light to dark
     --bh-ped-t / -l / -r              the journey pedestals' faces */

html[data-bh-theme="onyx"] {
  --p-bg: #0b0d10; --p-surface: #14171c; --p-ink: #eef0f3; --p-muted: #8b93a1;
  --p-accent: #f3b73f; --p-accent-ink: #15100a; --p-action: #f3b73f; --p-action-ink: #15100a;
  --p-inv-bg: #14171d; --p-inv-surface: #1c2027; --p-inv-ink: #eef0f3; --p-inv-muted: #9aa2b0;
  --p-inv-accent: #f3b73f; --p-inv-accent-ink: #15100a; --p-inv-action: #f3b73f; --p-inv-action-ink: #15100a;
  --bh-hi: #f3b73f; --bh-hi-2: #ffd27a; --bh-hi-3: #e09a1a; --bh-hi-ink: #15100a;
  --bh-up: #2fcf8e; --bh-gold: #f3b73f;
  --bh-raise: #171b21; --bh-screen: #0e1115;
  --bh-metal-1: #4a515c; --bh-metal-2: #262b33; --bh-metal-3: #15181d;
  --bh-ped-t: #2b313b; --bh-ped-l: #1d2229; --bh-ped-r: #15191e;
  --ground-bg: #12151a; --ground-surface: #191d23; --ground-ink: #eef0f3; --ground-muted: #8b93a1; --ground-accent: #f3b73f;
  --bh-card: #121519;
  --bh-glow-1: #f3b73f; --bh-glow-2: #2fcf8e; --bh-glow-3: #ffd27a; --bh-glow-faint: rgb(243 183 63 / .14);
  --bh-aura-1: rgb(243 183 63 / .13); --bh-aura-2: rgb(47 207 142 / .10); --bh-aura-3: rgb(110 130 160 / .14);
  --bh-chev-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23f3b73f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html[data-bh-theme="abyss"] {
  --p-bg: #060b16; --p-surface: #0d1526; --p-ink: #e7eefa; --p-muted: #8c9cb8;
  --p-accent: #4c9dff; --p-accent-ink: #ffffff; --p-action: #3d8bff; --p-action-ink: #ffffff;
  --p-inv-bg: #0b1428; --p-inv-surface: #121e38; --p-inv-ink: #e7eefa; --p-inv-muted: #9cabc6;
  --p-inv-accent: #4c9dff; --p-inv-accent-ink: #ffffff; --p-inv-action: #3d8bff; --p-inv-action-ink: #ffffff;
  --bh-hi: #4c9dff; --bh-hi-2: #7ab8ff; --bh-hi-3: #2a6fe8; --bh-hi-ink: #ffffff;
  --bh-up: #2dd4bf; --bh-gold: #f5c451;
  --bh-raise: #111b30; --bh-screen: #08101f;
  --bh-metal-1: #47546d; --bh-metal-2: #1f2a40; --bh-metal-3: #0e1526;
  --bh-ped-t: #1d2b47; --bh-ped-l: #141f35; --bh-ped-r: #0e172a;
  --ground-bg: #0b1426; --ground-surface: #111d33; --ground-ink: #e7eefa; --ground-muted: #8c9cb8; --ground-accent: #4c9dff;
  --bh-card: #0b1324;
  --bh-glow-1: #4c9dff; --bh-glow-2: #2dd4bf; --bh-glow-3: #7dd3fc; --bh-glow-faint: rgb(76 157 255 / .14);
  --bh-aura-1: rgb(76 157 255 / .18); --bh-aura-2: rgb(45 212 191 / .10); --bh-aura-3: rgb(125 211 252 / .10);
  --bh-chev-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%234c9dff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html[data-bh-theme="emerald"] {
  --p-bg: #050d0a; --p-surface: #0c1813; --p-ink: #e6f4ee; --p-muted: #86a397;
  --p-accent: #19d98f; --p-accent-ink: #03140c; --p-action: #19d98f; --p-action-ink: #03140c;
  --p-inv-bg: #0a1712; --p-inv-surface: #11231b; --p-inv-ink: #e6f4ee; --p-inv-muted: #95b2a6;
  --p-inv-accent: #19d98f; --p-inv-accent-ink: #03140c; --p-inv-action: #19d98f; --p-inv-action-ink: #03140c;
  --bh-hi: #19d98f; --bh-hi-2: #6ff0bd; --bh-hi-3: #0db57a; --bh-hi-ink: #03140c;
  --bh-up: #19d98f; --bh-gold: #e2bd5a;
  --bh-raise: #0f1d17; --bh-screen: #07110d;
  --bh-metal-1: #4c5a53; --bh-metal-2: #1f2a25; --bh-metal-3: #0d1512;
  --bh-ped-t: #1b2e26; --bh-ped-l: #12221b; --bh-ped-r: #0c1914;
  --ground-bg: #0a1712; --ground-surface: #10211a; --ground-ink: #e6f4ee; --ground-muted: #86a397; --ground-accent: #19d98f;
  --bh-card: #0a1511;
  --bh-glow-1: #19d98f; --bh-glow-2: #e2bd5a; --bh-glow-3: #6ff0bd; --bh-glow-faint: rgb(25 217 143 / .14);
  --bh-aura-1: rgb(25 217 143 / .14); --bh-aura-2: rgb(226 189 90 / .10); --bh-aura-3: rgb(25 217 143 / .08);
  --bh-chev-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%2319d98f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ shared by every dark theme */
html[data-bh-tone="dark"] {
  color-scheme: dark;
  --bh-action-text: var(--bh-hi); --bh-accent-text: var(--bh-hi);
  --bh-card-shadow: inset 0 1px 0 rgb(255 255 255 / .04), 0 30px 60px -24px rgb(0 0 0 / .7);
  --bh-grid: rgb(255 255 255 / .04);
  --bh-danger: #f59e8b;
  --bh-deep: var(--p-bg); --bh-deep-2: var(--p-surface); --bh-deep-glow: var(--bh-raise);
  --bh-deep-acc: var(--bh-hi); --bh-deep-hi: var(--bh-hi-2); --bh-deep-lo: var(--bh-hi-3);
}
html[data-bh-tone="dark"] body { background: var(--p-bg); }
/* the kit gives a dark page's lit bands their ground's ink as the action: here the action stays the
   theme's highlight everywhere, one action, one look */
html[data-bh-tone="dark"] :is(.frame--cta, .frame--lit, .footer--statement) { --action: var(--p-action); --action-ink: var(--p-action-ink); }
html[data-bh-tone="dark"] .bg-band { --tone: var(--ground-bg); --tone-ink: var(--ground-ink); --card: var(--bh-raise);
  --action: var(--p-action); --action-ink: var(--p-action-ink); }
html[data-bh-tone="dark"] .h2-pick option { background: var(--p-surface); color: var(--p-ink); }
html[data-bh-tone="dark"] .nav.is-scrolled { background: color-mix(in oklab, var(--bg) 72%, transparent); }

/* the journey: the paper model becomes a dark glass one on graphite pedestals, lit by the highlight */
html[data-bh-tone="dark"] .journey { --jr-mint: var(--bh-hi); --jr-mint-deep: var(--bh-hi); --jr-gold: var(--bh-gold); }
html[data-bh-tone="dark"] #jr-top stop:first-child { stop-color: var(--bh-ped-t); }
html[data-bh-tone="dark"] #jr-top stop:last-child { stop-color: var(--bh-ped-l); }
html[data-bh-tone="dark"] #jr-glass stop { stop-color: #ffffff; }
html[data-bh-tone="dark"] #jr-glass stop:nth-child(1) { stop-opacity: .2; }
html[data-bh-tone="dark"] #jr-glass stop:nth-child(2) { stop-opacity: .09; }
html[data-bh-tone="dark"] #jr-glass stop:nth-child(3) { stop-opacity: .05; }
html[data-bh-tone="dark"] #jr-sweep stop:nth-child(2) { stop-opacity: .45; }
html[data-bh-tone="dark"] #jr-wallet stop:first-child { stop-color: var(--bh-metal-2); }
html[data-bh-tone="dark"] #jr-wallet stop:last-child { stop-color: var(--bh-metal-3); }
html[data-bh-tone="dark"] .jr__shadow { fill: rgb(0 0 0 / .55); }
html[data-bh-tone="dark"] .jr__ped-t { stroke: rgb(255 255 255 / .16); }
html[data-bh-tone="dark"] .jr__ped-l { fill: var(--bh-ped-l); }
html[data-bh-tone="dark"] .jr__ped-r { fill: var(--bh-ped-r); }
html[data-bh-tone="dark"] .jr__tube-shade { stroke: rgb(0 0 0 / .5); filter: drop-shadow(0 7px 6px rgb(0 0 0 / .4)); }
html[data-bh-tone="dark"] .jr__tube { stroke: rgb(255 255 255 / .15); }
html[data-bh-tone="dark"] .jr__tube-hi { stroke: rgb(255 255 255 / .3); }
html[data-bh-tone="dark"] .jr__tube-fill { filter: drop-shadow(0 0 4px var(--jr-mint)); }
html[data-bh-tone="dark"] .jr-glass { stroke: rgb(255 255 255 / .26); filter: drop-shadow(0 10px 12px rgb(0 0 0 / .45)); }
html[data-bh-tone="dark"] .jr-line { fill: rgb(255 255 255 / .62); }
html[data-bh-tone="dark"] .jr-line--soft { fill: rgb(255 255 255 / .2); }
html[data-bh-tone="dark"] .jr-plate { fill: rgb(255 255 255 / .07); stroke: rgb(255 255 255 / .2); }
html[data-bh-tone="dark"] :is(.jr-kyc__band, .jr-kyc__face) { fill: color-mix(in oklab, var(--bh-hi) 22%, transparent); }
html[data-bh-tone="dark"] .jr-kyc__head { fill: var(--bh-hi); }
html[data-bh-tone="dark"] .jr-badge circle { stroke: var(--p-bg); filter: drop-shadow(0 0 10px color-mix(in oklab, var(--bh-hi) 60%, transparent)); }
html[data-bh-tone="dark"] :is(.jr-badge, .jr-ticket) path { stroke: var(--bh-hi-ink); }
html[data-bh-tone="dark"] .jr-cube__t { fill: var(--bh-ped-t); }
html[data-bh-tone="dark"] .jr-cube__l { fill: var(--bh-ped-l); }
html[data-bh-tone="dark"] .jr-cube__r { fill: var(--bh-ped-r); }
html[data-bh-tone="dark"] .jr-cube path { stroke: rgb(255 255 255 / .14); }
html[data-bh-tone="dark"] .jr-candle line { stroke: rgb(255 255 255 / .3); }
html[data-bh-tone="dark"] .jr-candle rect { fill: rgb(255 255 255 / .2); }
html[data-bh-tone="dark"] .jr-candle.is-up line { stroke: var(--bh-up); }
html[data-bh-tone="dark"] .jr-candle.is-up rect { fill: var(--bh-up); }
html[data-bh-tone="dark"] .jr-ring { stroke: rgb(255 255 255 / .1); filter: drop-shadow(0 8px 10px rgb(0 0 0 / .45)); }
html[data-bh-tone="dark"] .jr-card { stroke: rgb(255 255 255 / .35); }
html[data-bh-tone="dark"] .jr-wallet { filter: drop-shadow(0 12px 14px rgb(0 0 0 / .55)); }
html[data-bh-tone="dark"] .jr-wallet__clasp { fill: var(--bh-metal-3); }
html[data-bh-tone="dark"] .jr-amount rect { fill: var(--bh-raise); stroke: var(--bh-gold); filter: drop-shadow(0 10px 14px rgb(0 0 0 / .5)); }
html[data-bh-tone="dark"] .jr-amount text { fill: var(--bh-gold); }
html[data-bh-tone="dark"] .jr__source-ring { fill: var(--bh-raise); stroke: rgb(255 255 255 / .16); filter: drop-shadow(0 4px 6px rgb(0 0 0 / .5)); }
html[data-bh-tone="dark"] .jr__cap { border-color: rgb(255 255 255 / .09); background: color-mix(in oklab, var(--bh-raise) 82%, transparent);
  box-shadow: 0 18px 40px -16px rgb(0 0 0 / .7); }
html[data-bh-tone="dark"] .jr__cap--below { background: var(--bh-raise); }
html[data-bh-tone="dark"] .jr__status { background: color-mix(in oklab, var(--bh-hi) 16%, transparent); }
html[data-bh-tone="dark"] .jr__status--gold { background: color-mix(in oklab, var(--bh-gold) 16%, transparent); color: var(--bh-gold); }
html[data-bh-tone="dark"] .jr__steps li.is-on .jr__node { background: var(--p-bg); box-shadow: 0 0 0 5px color-mix(in oklab, var(--bh-hi) 25%, transparent); }
html[data-bh-tone="dark"] .jr__pause { background: rgb(255 255 255 / .05); }

/* the phone: a dark titanium shell around a near-black screen, the highlight glowing at its edge */
html[data-bh-tone="dark"] .calc-glow { --action: var(--bh-hi); --action-ink: var(--bh-hi-ink); --bh-cyan-deep: var(--bh-hi); }
@media (min-width: 640px) {
  html[data-bh-tone="dark"] .calc-glow {
    background: linear-gradient(150deg, var(--bh-metal-1) 0%, var(--bh-metal-2) 20%, var(--bh-metal-1) 46%, var(--bh-metal-3) 72%, var(--bh-metal-2) 100%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), inset 0 2px 2px rgb(255 255 255 / .1), inset 0 -3px 4px rgb(0 0 0 / .5),
      0 0 0 1px rgb(0 0 0 / .7), 0 44px 80px -30px rgb(0 0 0 / .85), 0 0 56px color-mix(in oklab, var(--bh-hi) 26%, transparent); }
  html[data-bh-tone="dark"] .calc-glow::before { background: linear-gradient(90deg, var(--bh-metal-3), var(--bh-metal-1)); box-shadow: 0 66px 0 0 var(--bh-metal-2); }
  html[data-bh-tone="dark"] :is(.bh-right > .calc-glow, .calc-glow)::after { background: linear-gradient(90deg, var(--bh-metal-1), var(--bh-metal-3)); }
  html[data-bh-tone="dark"] .calc-glow > .calc { background: var(--bh-screen); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); }
}
html[data-bh-tone="dark"] .calc__cam { background: radial-gradient(circle at 35% 35%, #3b4250, #000 62%); box-shadow: 0 0 0 2px rgb(255 255 255 / .04); }
html[data-bh-tone="dark"] .calc-glow .calc__steps li.is-done::before { background: color-mix(in oklab, var(--bh-hi) 18%, transparent); }
html[data-bh-tone="dark"] .calc-glow .calc__mode { border-color: var(--line); background: rgb(255 255 255 / .04); }
html[data-bh-tone="dark"] .calc-glow .calc__mode-opt input:checked + span { background: linear-gradient(135deg, var(--bh-hi-2), var(--bh-hi)); color: var(--bh-hi-ink);
  box-shadow: 0 4px 14px -4px color-mix(in oklab, var(--bh-hi) 60%, transparent), inset 0 1px 0 rgb(255 255 255 / .35); }
html[data-bh-tone="dark"] .calc-glow :is(.field input, .field select, .pick, .calc__day input) { border-color: var(--line-strong); background-color: var(--bh-raise); color: var(--ink); }
html[data-bh-tone="dark"] .calc-glow :is(.field input, .calc__day input):focus,
html[data-bh-tone="dark"] .calc-glow .field select:focus { border-color: var(--bh-hi); box-shadow: 0 0 0 3px color-mix(in oklab, var(--bh-hi) 24%, transparent); }
html[data-bh-tone="dark"] .calc-glow .acct__opt span { border-color: var(--line-strong); background: var(--bh-raise); }
html[data-bh-tone="dark"] .calc-glow .acct__opt input:checked + span { background: color-mix(in oklab, var(--bh-hi) 18%, var(--bh-raise)); border-color: var(--bh-hi); color: var(--ink); }
html[data-bh-tone="dark"] .calc-glow .acct__opt input:checked + span svg { color: var(--bh-hi); }
html[data-bh-tone="dark"] .calc-glow .calc__day-date { border-right-color: var(--line-strong); background: rgb(255 255 255 / .04); }
html[data-bh-tone="dark"] .calc-glow .calc__preview { border-color: color-mix(in oklab, var(--bh-hi) 30%, transparent);
  background: linear-gradient(135deg, color-mix(in oklab, var(--bh-hi) 14%, transparent), color-mix(in oklab, var(--bh-hi) 6%, transparent)); }
html[data-bh-tone="dark"] .calc-glow .calc__preview > div + div { border-left-color: color-mix(in oklab, var(--bh-hi) 22%, transparent); }
html[data-bh-tone="dark"] .calc-glow .calc .btn--primary { color: var(--bh-hi-ink);
  background: linear-gradient(135deg, var(--bh-hi-2), var(--bh-hi) 55%, var(--bh-hi-3));
  box-shadow: 0 12px 26px -10px color-mix(in oklab, var(--bh-hi) 70%, transparent), inset 0 1px 0 rgb(255 255 255 / .35); }
html[data-bh-tone="dark"] .calc-glow .calc .btn--primary:hover { background: linear-gradient(135deg, var(--bh-hi), var(--bh-hi-3)); }
html[data-bh-tone="dark"] .calc-receipt { filter: drop-shadow(0 18px 24px rgb(0 0 0 / .6)) drop-shadow(0 0 1px rgb(255 255 255 / .25)); }
html[data-bh-tone="dark"] .calc-receipt__paper { background: var(--bh-raise); }
html[data-bh-tone="dark"] .calc-receipt__status circle { fill: var(--bh-hi); }
html[data-bh-tone="dark"] .calc-receipt__status path { stroke: var(--bh-hi-ink); }
html[data-bh-tone="dark"] .calc-receipt__amount { color: var(--bh-up); }
html[data-bh-tone="dark"] :is(.bh-picker, .bh-modal)::backdrop { background: rgb(0 0 0 / .72); }