/* ════════════════════════════════════════════════════════════════════════════
   Blue Gold energy instrument — shared scoped styles
   Lifted from ~/workspace/bg-energy-demo comps (2026-06-10), base64 assets
   externalized to /static/fonts and /static/img.
   Everything is scoped under .bg-energy so host CSS is untouched.
   Host page must set: body{margin:0;background:#08090a}
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Montserrat (latin subset, weights 400/600/700/800) ─────────────────── */
@font-face{font-family:'Montserrat BG';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/montserrat-bg-400.woff2) format('woff2');}
@font-face{font-family:'Montserrat BG';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/montserrat-bg-600.woff2) format('woff2');}
@font-face{font-family:'Montserrat BG';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/montserrat-bg-700.woff2) format('woff2');}
@font-face{font-family:'Montserrat BG';font-style:normal;font-weight:800;font-display:swap;src:url(/static/fonts/montserrat-bg-800.woff2) format('woff2');}

/* ── Scoped token system (blue-gold tokens.css values, hosted on wrapper) ── */
.bg-energy{
  --bg:#ffffff; --surface:#e9e9ea; --surface-warm:var(--surface);
  --fg:#011635; --fg-2:#4a4e53; --muted:#74777b; --meta:#a0a2a5;
  --border:#cacbcd; --border-soft:var(--border);
  --accent:#ff9c00; --accent-on:#011635; --accent-hover:#da8500; --accent-active:#ba6000;
  --success:#1f7a3a; --warn:#da8500; --danger:#b8422e;
  --navy:#011635; --navy-deep:#000c1f;
  --font-display:'Montserrat BG',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-body:'Montserrat BG',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --text-xs:11px; --text-sm:13px; --text-base:14px; --text-lg:19px;
  --text-xl:24px; --text-2xl:35px; --text-3xl:42px; --text-4xl:64px;
  --leading-body:1.6; --leading-tight:1.2; --tracking-display:-0.01em;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-8:48px; --space-12:64px;
  --section-y-desktop:96px; --section-y-tablet:64px; --section-y-phone:48px;
  --radius-sm:4px; --radius-md:8px; --radius-lg:16px; --radius-pill:9999px;
  --elev-flat:none; --elev-ring:0 0 0 1px var(--border); --elev-raised:0 1px 3px rgba(1,22,53,.06);
  --focus-ring:0 0 0 3px rgba(255,156,0,.40);
  --motion-fast:150ms; --motion-base:300ms; --motion-slow:500ms;
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --container-max:1200px; --container-gutter-desktop:32px; --container-gutter-tablet:24px; --container-gutter-phone:16px;
}
/* dark / premium showcase overrides — this design is always the dark instrument */
.bg-energy[data-theme="dark"]{
  --bg:#08090a; --surface:#1d2126; --surface-warm:var(--surface);
  --fg:#ffffff; --fg-2:#cacbcd; --muted:#a0a2a5; --meta:#74777b;
  --border:rgba(255,255,255,.08); --border-soft:var(--border);
  --accent:#ff9c00; --accent-on:#011635; --accent-hover:#ffba4e; --accent-active:#ffd086;
  --success:#4fbf6f; --warn:#ffba4e; --danger:#e07a6e;
  --elev-raised:0 1px 3px rgba(0,0,0,.30);
  --focus-ring:0 0 0 3px rgba(255,156,0,.55);
}

/* ── Scoped resets (only inside the wrapper — host CSS untouched) ────────── */
.bg-energy *,.bg-energy *::before,.bg-energy *::after{box-sizing:border-box;margin:0;padding:0;}
.bg-energy{
  font-family:var(--font-body); background:var(--bg); color:var(--fg-2);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-size:var(--text-base); line-height:var(--leading-body);
  font-variant-numeric:normal; letter-spacing:0;
}
.bg-energy ::selection{background:rgba(255,156,0,.28);color:#fff;}
.bg-energy :focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm);}
.bg-energy h1,.bg-energy h2,.bg-energy h3,.bg-energy h4{font-family:var(--font-display);color:var(--fg);line-height:var(--leading-tight);font-weight:700;}
.bg-energy .num{font-variant-numeric:tabular-nums;}

.bg-energy .wrap{max-width:var(--container-max);margin:0 auto;padding-left:var(--container-gutter-desktop);padding-right:var(--container-gutter-desktop);}
.bg-energy .overline{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);}

/* ── Shared buttons ──────────────────────────────────────────────────────── */
.bg-energy .btn{font-family:var(--font-display);font-weight:700;font-size:var(--text-base);border-radius:var(--radius-pill);
  min-height:48px;padding:0 var(--space-6);display:inline-flex;align-items:center;gap:10px;cursor:pointer;border:1px solid transparent;
  transition:background var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-standard),color var(--motion-fast);}
.bg-energy .btn-primary{background:var(--accent);color:var(--accent-on);}
.bg-energy .btn-primary:hover{background:var(--accent-hover);}
.bg-energy .btn-primary:active{background:var(--accent-active);color:#fff;transform:translateY(1px);}
.bg-energy .btn-primary:disabled{background:var(--surface);color:var(--muted);cursor:not-allowed;}
.bg-energy .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.22);}
.bg-energy .btn-ghost:hover{border-color:rgba(255,255,255,.5);}

/* ── Signoff footer ──────────────────────────────────────────────────────── */
.bg-energy .signoff{border-top:1px solid var(--border);margin-top:var(--space-8);}
.bg-energy .signoff .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);
  padding-top:var(--space-6);padding-bottom:var(--space-6);flex-wrap:wrap;}
.bg-energy .signoff .by{display:flex;align-items:center;gap:var(--space-3);color:var(--muted);font-size:var(--text-sm);}
.bg-energy .signoff .by img{height:18px;width:auto;opacity:.8;}
.bg-energy .signoff .disc{color:var(--meta);font-size:var(--text-xs);max-width:52ch;line-height:1.5;text-align:right;}
@media (max-width:980px){
  .bg-energy .wrap{padding-left:var(--container-gutter-tablet);padding-right:var(--container-gutter-tablet);}
  .bg-energy .signoff .disc{text-align:left;}
}
@media (max-width:620px){
  .bg-energy .wrap{padding-left:var(--container-gutter-phone);padding-right:var(--container-gutter-phone);}
}