/* Shared appearance roles. Dark remains the default when storage is unavailable. */
:root{
  --font-ui:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-button:0.8125rem;
  --radius-button:7px;
  color-scheme:dark;
  --bg:#080f1d;
  --text:#f5faff;
  --muted:#a5bed9;
  --line:#1e466b;
  --accent:#36caff;
  --blue:#0075c9;
  --purple:#ad8aff;
  --success:#87e6c0;
  --error:#ffb4b8;
  --chart-a:#16b9ff;
  --chart-b:#a5efff;
  --header:#031020;
  --button:#0b2b48;
  --button-border:#28608a;
  --button-hover:#104064;
  --primary-border:#21baff;
  --primary-hover:#0067b1;
  --surface:#071b30;
  --surface-raised:#0b2b49;
  --selected:#073d62;
  --selected-border:#12b7f5;
  --border-strong:#477ca5;
  --badge:#082c49;
  --badge-border:#23577e;
  --secondary-text:#c6dff2;
  --border-dashed:#305a7c;
  --input:#041426;
  --placeholder:#87a8c8;
  --readonly:#10283e;
  --focus:#8cecff;
  --surface-inset:#051629;
  --row:#091f36;
  --info-bg:#0b304d;
  --warning-bg:#142b46;
  --warning-border:#558ac4;
  --warning-text:#cceaff;
  --dialog:#091f36;
  --chart-grid:#234b6c;
  --success-bg:#153c33;
  --success-border:#39836b;
  --success-hover:#205444;
  --success-hover-border:#6ba68d;
  --danger-bg:#452735;
  --danger-border:#71444e;
  --canvas-surround:#26354b;
  --neutral-text:#7386a2;
  --hover:#103b5a;
  --chart-orange:#d3b3ff;
  --chart-pink:#ed92be;
  --chart-lavender:#b8ceff;
  --chart-temperature:#ff9191;
  --disabled-bg:#344154;
  --disabled-border:#526075;
  --disabled-text:#d3d9e2;
  --neutral-border:#727780;
  --neutral-bg:#292c31;
  --neutral-label:#e5e7eb;
  --range-track:#858a92;
  --range-thumb:#b7bbc2;
  --chart-cell-1:#62b9ff;
  --chart-cell-2:#a5efff;
  --chart-cell-3:#a895ff;
  --rating-lightness:18%;
  --highlight:#a5efff;
}
:root[data-theme=light]{
  color-scheme:light;
  --bg:#ffffff;
  --text:#111827;
  --muted:#374151;
  --line:#768395;
  --accent:#174ea6;
  --blue:#174ea6;
  --purple:#633394;
  --success:#166534;
  --error:#991b1b;
  --chart-a:#174ea6;
  --chart-b:#005563;
  --header:#555555;
  --button:#f1f4f8;
  --button-border:#596779;
  --button-hover:#e2e9f2;
  --primary-border:#174ea6;
  --primary-hover:#103d85;
  --surface:#ffffff;
  --surface-raised:#ffffff;
  --selected:#dbe8fa;
  --selected-border:#174ea6;
  --border-strong:#596779;
  --badge:#e2edf8;
  --badge-border:#768395;
  --secondary-text:#273548;
  --border-dashed:#596779;
  --input:#ffffff;
  --placeholder:#475569;
  --readonly:#eaf0f7;
  --focus:#174ea6;
  --surface-inset:#eaf0f7;
  --row:#ffffff;
  --info-bg:#e5f0fa;
  --warning-bg:#fff2d8;
  --warning-border:#79500b;
  --warning-text:#654000;
  --dialog:#ffffff;
  --chart-grid:#8793a3;
  --success-bg:#e0f4e9;
  --success-border:#166534;
  --success-hover:#ccebdc;
  --success-hover-border:#166534;
  --danger-bg:#fbe6eb;
  --danger-border:#991b1b;
  --canvas-surround:#dbe3ed;
  --neutral-text:#374151;
  --hover:#e3edf9;
  --chart-orange:#754600;
  --chart-pink:#8b2259;
  --chart-lavender:#42458b;
  --chart-temperature:#991b1b;
  --disabled-bg:#e0e5ec;
  --disabled-border:#a7b4c5;
  --disabled-text:#4c5d73;
  --neutral-border:#596779;
  --neutral-bg:#e9edf2;
  --neutral-label:#273548;
  --range-track:#596779;
  --range-thumb:#374151;
  --chart-cell-1:#174ea6;
  --chart-cell-2:#754600;
  --chart-cell-3:#633394;
  --rating-lightness:94%;
}

/* Documents retain their original paper and ink; car logos use their original dark artwork. */
html[data-theme=light] .car-logo{filter:none;mix-blend-mode:normal}
html[data-theme=light] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='m2 2 5 5 5-5' fill='none' stroke='%23445d7b' stroke-width='2'/%3E%3C/svg%3E")}

/* Outdoor light mode: clear edges and labels without changing dark-mode typography. */
html[data-theme=light] .card,html[data-theme=light] .panel{background:var(--surface)}
html[data-theme=light] label,html[data-theme=light] th,html[data-theme=light] .stats small,
html[data-theme=light] .run-metric dt{font-weight:600}
html[data-theme=light] .stats strong{font-weight:650}
html[data-theme=light] .progress-toggle[aria-pressed=false]{opacity:1;color:var(--muted);border:1px dashed var(--button-border)}

/* The light wordmark has transparent vertical padding; crop it into the existing logo slot. */
html[data-theme=light] .brand img,html[data-theme=light] .auth-brand img{
  content:url('/icons/engine9000-light-v2.png?v=e9a43d6a9631cf10beeb9d20834566253d1b9b4dd3b6479ca9495584e077df59');
  background:transparent;
  border-radius:0;
  object-fit:cover;
}
html[data-theme=light] .auth-brand img{height:48px}

/* Match the supplied grey header swatch in light mode. */
html[data-theme=light] header .brand,
html[data-theme=light] header .brand span,
html[data-theme=light] header .context-label{color:#ffffff}

/* Electric wordmark stays live text, including on the sign-in screen. */
html:not([data-theme=light]) :is(.brand,.auth-brand) span{
  display:inline-block;
  color:#f2fcff;
  font-style:italic;
  font-weight:900;
  letter-spacing:.1em;
  text-shadow:0 0 2px #fff,0 0 8px #30ceff,0 0 18px #008cff;
  position:relative;
}
html:not([data-theme=light]) :is(.brand,.auth-brand) span::after{
  content:"";
  position:absolute;
  left:-4%;right:-6%;bottom:-7px;height:6px;
  background:#a5efff;
  clip-path:polygon(0 60%,30% 28%,43% 48%,61% 0,55% 48%,100% 26%,68% 75%,48% 65%,30% 100%,34% 64%);
  filter:drop-shadow(0 0 3px #00baff);
  pointer-events:none;
}