/* SectorCalc shared theme — light/dark engine companion CSS (v8)
   Never put star-slash inside comments (breaks the next rule). */
@import url('./sc-form-fields.css');

html{
  color-scheme:light;
}
html[data-theme="dark"]{
  color-scheme:dark;
}

/* ---- Explicit LIGHT tokens (all page families) ---- */
html[data-theme="light"],
html:not([data-theme="dark"]){
  /* Homepage / sheet */
  --sheet-white:#F5F5F0;
  --sheet-paper:#FFFFFF;
  --sheet-grid:#E0E0D8;
  --sheet-line:#C5C5BE;
  --sheet-line-strong:#999994;
  --sheet-line-hair:#D8D8D0;
  --sheet-text:#1A1A1A;
  --sheet-text-2:#4A4A4A;
  --sheet-text-3:#7A7A7A;
  --iso-blue:#0055A4;
  --iso-blue-dim:#003D66;
  --iso-blue-light:#E6F0F7;
  --iso-orange-light:#FDF2EC;
  --iso-green-light:#E8F5EE;
  --iso-red-light:#FCE8E8;
  --iso-yellow-light:#FFF8E6;

  /* Pro tools */
  --bg-0:#F5F5F0;
  --bg-1:#FFFFFF;
  --bg-2:#E0E0D8;
  --bg-3:#E8E8E2;
  --bg-4:#D8D8D0;
  --border-subtle:#D8D8D0;
  --border-soft:#C5C5BE;
  --border-mid:#999994;
  --border-strong:#999994;
  --text-primary:#1A1A1A;
  --text-secondary:#4A4A4A;
  --text-tertiary:#4A4A4A;
  --text-muted:#7A7A7A;
  --text-dim:#C5C5BE;
  --accent-blue:#0055A4;
  --accent-cyan:#0055A4;
  --accent-purple:#0055A4;
  --accent-blue-glow:rgba(0,85,164,0.08);
  --accent-cyan-glow:rgba(0,85,164,0.08);

  /* Pricing */
  --bg:#F5F5F0;
  --surface:#FFFFFF;
  --ink:#1A1A1A;
  --ink2:#4A4A4A;
  --muted:#7A7A7A;
  --blue:#0055A4;
  --blue2:#0055A4;
  --blue-soft:rgba(0,85,164,0.12);
  --border:#C5C5BE;
  --border2:#999994;
}

/* ---- Explicit DARK tokens (all page families) ---- */
html[data-theme="dark"]{
  --sheet-white:#14171A;
  --sheet-paper:#1B1F23;
  --sheet-grid:#2E343A;
  --sheet-line:#3A4046;
  --sheet-line-strong:#555C64;
  --sheet-line-hair:#2E343A;
  --sheet-text:#FFFFFF;
  --sheet-text-2:#E8EAEC;
  --sheet-text-3:#A8B0B8;
  --iso-blue:#4FA6D6;
  --iso-blue-dim:#3A8FBE;
  --iso-blue-light:#1A2A38;
  --iso-orange-light:#2A2118;
  --iso-green-light:#1A2A20;
  --iso-red-light:#2A1818;
  --iso-yellow-light:#2A2618;
  --iso-blue-glow:rgba(79,166,214,0.16);
  --iso-orange-glow:rgba(255,106,43,0.18);
  --iso-green-glow:rgba(124,196,107,0.14);

  --bg-0:#14171A;
  --bg-1:#1B1F23;
  --bg-2:#2E343A;
  --bg-3:#243038;
  --bg-4:#3A4046;
  --border-subtle:#2E343A;
  --border-soft:#3A4046;
  --border-mid:#555C64;
  --border-strong:#6A727A;
  --text-primary:#FFFFFF;
  --text-secondary:#E8EAEC;
  --text-tertiary:#E8EAEC;
  --text-muted:#A8B0B8;
  --text-dim:#6B737A;
  --accent-blue:#4FA6D6;
  --accent-cyan:#4FA6D6;
  --accent-purple:#4FA6D6;
  --accent-blue-glow:rgba(79,166,214,0.16);
  --accent-cyan-glow:rgba(79,166,214,0.16);
  --accent-green-glow:rgba(124,196,107,0.14);
  --accent-amber-glow:rgba(255,106,43,0.18);
  --accent-red-glow:rgba(200,16,46,0.18);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.35);
  --shadow-md:0 2px 8px rgba(0,0,0,0.4);
  --shadow-lg:0 4px 16px rgba(0,0,0,0.45);

  --bg:#14171A;
  --surface:#1B1F23;
  --ink:#FFFFFF;
  --ink2:#E8EAEC;
  --muted:#A8B0B8;
  --blue:#4FA6D6;
  --blue2:#4FA6D6;
  --blue-soft:rgba(79,166,214,0.16);
  --border:#3A4046;
  --border2:#555C64;
}

/* ---- Toggle button (fixed; drag to reposition) ---- */
.theme-toggle{
  position:fixed !important;
  top:20px;
  right:20px;
  z-index:10060 !important;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1.5px solid var(--sheet-line-strong, var(--border-mid, #999994));
  background:var(--sheet-paper, var(--bg-1, #fff));
  color:var(--sheet-text-2, var(--text-secondary, #4A4A4A));
  display:flex !important;
  align-items:center;
  justify-content:center;
  cursor:grab;
  box-shadow:0 2px 12px rgba(0,0,0,.12);
  pointer-events:auto !important;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
  user-select:none;
  padding:0;
  margin:0;
  appearance:none;
}
.theme-toggle:hover{
  border-color:var(--iso-blue, var(--accent-blue, #0055A4));
  color:var(--iso-blue, var(--accent-blue, #0055A4));
}
.theme-toggle:focus-visible{
  outline:2px solid var(--iso-blue, var(--accent-blue, #0055A4));
  outline-offset:3px;
}
.theme-toggle.is-dragging{
  cursor:grabbing;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  border-color:var(--iso-blue, var(--accent-blue, #0055A4));
  transform:none !important;
}
/* Saved drag position overrides default corner placement */
.theme-toggle[data-sc-pos="1"]{
  right:auto !important;
  bottom:auto !important;
}
.theme-toggle svg{
  width:22px;
  height:22px;
  display:none !important;
  pointer-events:none;
}
/* CSS-driven icons — do not depend on JS inline styles */
html[data-theme="light"] .theme-toggle [data-theme-icon="moon"],
html:not([data-theme="dark"]) .theme-toggle [data-theme-icon="moon"]{
  display:block !important;
}
html[data-theme="dark"] .theme-toggle [data-theme-icon="sun"]{
  display:block !important;
}
html[data-theme="dark"] .theme-toggle [data-theme-icon="moon"],
html[data-theme="light"] .theme-toggle [data-theme-icon="sun"],
html:not([data-theme="dark"]) .theme-toggle [data-theme-icon="sun"]{
  display:none !important;
}
@media(max-width:900px){
  .theme-toggle:not([data-sc-pos="1"]){top:auto;bottom:20px;right:20px}
}

/* ---- Pro page surfaces ---- */
html[data-theme="dark"] .sc-header{
  background:var(--bg-1) !important;
  color:var(--text-primary);
  border-bottom-color:var(--border-soft);
}
html[data-theme="dark"] .sc-header-title{
  color:var(--text-primary);
}
html[data-theme="dark"] .sc-tooltip{
  background:var(--bg-3);
  border-color:var(--border-mid);
  color:var(--text-secondary);
}
html[data-theme="dark"] .sc-btn-primary:hover{
  background:#003D66;
  border-color:#003D66;
  color:#fff;
}
html[data-theme="dark"] .sc-unit{
  opacity:0.9;
}
html[data-theme="dark"] .sc-input,
html[data-theme="dark"] select.sc-input{
  color-scheme:dark;
}

/* ---- Pricing surfaces ---- */
html[data-theme="dark"] header,
html[data-theme="dark"] .pack,
html[data-theme="dark"] .how,
html[data-theme="dark"] .why div,
html[data-theme="dark"] footer,
html[data-theme="dark"] .btn-ghost{
  background:var(--surface) !important;
  color:var(--ink);
}
html[data-theme="dark"] .note{
  background:rgba(232,119,34,0.14);
  border-color:#5A3A22;
  color:var(--ink2);
}
html[data-theme="dark"] .note b{color:var(--ink)}
html[data-theme="dark"] .step .n{
  background:var(--bg);
  border-color:var(--border2);
  color:var(--blue);
}
html[data-theme="dark"] .pack.pop{
  box-shadow:0 4px 16px rgba(79,166,214,0.18);
}
html[data-theme="dark"] .btn-primary{
  color:#fff !important;
}
html[data-theme="dark"] .btn-ghost:hover{
  border-color:var(--blue);
  color:var(--blue);
}
html[data-theme="light"] header,
html[data-theme="light"] .pack,
html[data-theme="light"] .how,
html[data-theme="light"] .why div,
html[data-theme="light"] footer,
html[data-theme="light"] .btn-ghost{
  background:var(--surface);
  color:var(--ink);
}

/* ---- Brand logo sizing + dark wordmark swap ---- */
.brand-mark,.mk,.sc-logo{position:relative}
.brand-mark{width:auto;height:48px}
.brand-mark--footer{height:56px}
.mk{width:auto;height:42px}
.sc-logo{height:42px !important}
.brand-mark img,.mk img,.sc-logo img{
  width:auto !important;
  height:100% !important;
  object-fit:contain;
  display:block;
}
.logo-dark{display:none !important}
html[data-theme="dark"] .logo-light{display:none !important}
html[data-theme="dark"] .logo-dark{display:block !important}
html[data-theme="light"] .logo-light,
html:not([data-theme="dark"]) .logo-light{display:block !important}
html[data-theme="light"] .logo-dark,
html:not([data-theme="dark"]) .logo-dark{display:none !important}

/* Smooth theme transitions for surfaces/text (not transforms) */
body,.sheet,.sc-header,header,footer,.pack,.how,.why div,.sc-sidebar,.sc-card,.sc-card-res{
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* ---- Pro report contrast standard (all *-pro tools + future tools) ----
   Text/labels on report surfaces must use tokens, never hardcoded light ink.
   SVG/canvas fills come from src/lib/theme-palette.ts at render time. */
.sc-main,
.sc-main-inner,
#reportArea{
  color:var(--text-primary);
}
.sc-report-title,
.sc-card-res-val,
.sc-live-val,
.sc-whatif-val,
.sc-rec-title,
.sc-table .td-val{
  color:var(--text-primary);
}
.sc-table td{
  color:var(--text-primary);
}
.sc-table .td-name,
.sc-card-res-sub,
.sc-live-sub,
.sc-pareto-name,
.sc-pareto-pct,
.sc-whatif-lbl,
.sc-report-meta,
.sc-sec-hd,
.sc-std,
.sc-footer,
.sc-empty,
.sc-empty-desc{
  color:var(--text-muted);
}
.sc-card,
.sc-card-res,
.sc-chart,
.sc-whatif-card,
.sc-rec,
.sc-empty-icon{
  background:var(--bg-1);
  color:var(--text-primary);
  border-color:var(--border-subtle);
}
.sc-whatif-card,
.sc-rec,
.sc-pareto-track{
  background:var(--bg-2);
}
.sc-live{
  background:linear-gradient(135deg,var(--accent-blue-glow),var(--accent-amber-glow,rgba(232,119,34,0.04)));
  border-color:color-mix(in srgb,var(--accent-blue) 22%,transparent);
  color:var(--text-primary);
}
.sc-live-hd{color:var(--text-secondary)}
html[data-theme="dark"] .sc-alert-crit{
  background:linear-gradient(135deg,rgba(200,16,46,0.16),rgba(200,16,46,0.06));
  border-color:rgba(200,16,46,0.35);
}
html[data-theme="dark"] .sc-alert-warn{
  background:linear-gradient(135deg,rgba(232,119,34,0.16),rgba(232,119,34,0.06));
  border-color:rgba(232,119,34,0.35);
}
html[data-theme="dark"] .sc-alert-pass{
  background:linear-gradient(135deg,rgba(0,122,51,0.16),rgba(0,122,51,0.06));
  border-color:rgba(0,122,51,0.35);
}
html[data-theme="dark"] .sc-badge-pass{
  background:rgba(0,122,51,0.2);
  border-color:rgba(0,122,51,0.35);
}
html[data-theme="dark"] .sc-badge-warn{
  background:rgba(232,119,34,0.2);
  border-color:rgba(232,119,34,0.35);
}
html[data-theme="dark"] .sc-badge-crit{
  background:rgba(200,16,46,0.2);
  border-color:rgba(200,16,46,0.35);
}
.sc-stack-bar-lbl,
.sc-stack-lbl{
  color:var(--text-primary);
}
.sc-stack-lbl{color:var(--text-muted)}
.sc-input,
select.sc-input,
textarea.sc-input{
  background:var(--bg-0);
  color:var(--text-primary);
  border-color:var(--border-soft);
}
.sc-input::placeholder{
  color:var(--text-muted);
}