/* === TorqueCanvas Dark Theme Token Mapping (fix contrast) === */
:root{
  /* Map original light-theme tokens to TorqueCanvas dark palette */
  --bg: var(--tc-black);
  --text: var(--tc-mist);
  --muted: #AEBBCC;
  --line: #1E242A;
  --panel: var(--tc-graphite);
  --accent: var(--tc-volt);
  --accent-soft: rgba(0,230,255,.12);
  --shadow: 0 8px 28px rgba(0,0,0,.35);
}

/* Force previously white bars to dark */
.brandbar, .vehbar{
  background: var(--tc-black) !important;
  border-color: #1E242A !important;
}

/* Panels & cards */
.panel, .card, .box{
  background: var(--tc-graphite) !important;
  color: var(--tc-mist) !important;
  border-color: #1E242A !important;
}

/* Common text elements */
h1,h2,h3,h4,h5,h6,p,small,span,li,label{
  color: var(--tc-mist) !important;
}
.muted, .subtle, .veh-label{
  color: var(--muted) !important;
}

/* Inputs / selects */
input[type='text'], input[type='number'], select, textarea{
  background: var(--tc-asphalt) !important;
  color: var(--tc-mist) !important;
  border-color: #2A3036 !important;
}
select option{
  background: var(--tc-asphalt);
  color: var(--tc-mist);
}

/* Tiles / chips */
.tile, .chip, .thumb{
  background: var(--tc-asphalt) !important;
  color: var(--tc-mist) !important;
  border-color: #2A3036 !important;
}
.tile.active, .chip.active, .thumb:focus, .thumb.active{
  outline: 2px solid var(--tc-volt) !important;
  background: rgba(0,230,255,.12) !important;
}

/* Segmented buttons for finishes */
.seg, .seg .btn, .seg button{
  background: var(--tc-asphalt) !important;
  color: var(--tc-mist) !important;
  border: 1px solid #2A3036 !important;
}
.seg .btn.active{
  background: var(--tc-volt) !important;
  color: var(--tc-black) !important;
  border-color: var(--tc-volt) !important;
}

/* Preview area frame */
.viewport, .preview, .preview-area{
  background: #0A0C0E !important;
  border: 1px solid #1E242A !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
}

/* Sliders — ensure high contrast */
input[type=range]{
  height: 6px !important; background: #2F363D !important; border-radius:999px !important;
  border: 1px solid #20262C !important;
}
input[type=range]::-webkit-slider-thumb{
  width: 18px !important; height: 18px !important;
  background: var(--tc-volt) !important; border:2px solid var(--tc-black) !important; border-radius:50% !important;
}
input[type=range]::-moz-range-thumb{
  width: 18px !important; height: 18px !important;
  background: var(--tc-volt) !important; border:2px solid var(--tc-black) !important; border-radius:50% !important;
}


/* === TorqueCanvas Brand Overrides v1 === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Space+Grotesk:wght@500;700&display=swap');

:root{
  --tc-black:#0B0D0F; --tc-graphite:#161A1D; --tc-asphalt:#22262B;
  --tc-mist:#E7EDF3; --tc-snow:#F6F8FB; --tc-volt:#00E6FF; --tc-plasma:#FF4D1A;
  --tc-radius:12px; --tc-radius-lg:16px;
}

html, body{
  background:var(--tc-black);
  color:var(--tc-mist);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

.tc-display, h1,h2,h3,.display{
  font-family:'Space Grotesk', Inter, sans-serif;
  letter-spacing:0.2px;
}

a{ color: var(--tc-volt); }
a:hover{ opacity:.9; }

/* Buttons */
button, .btn, .button{
  background: var(--tc-volt);
  color: var(--tc-black);
  border: none;
  border-radius: var(--tc-radius);
  padding: 12px 16px;
  font-weight: 600;
  transition: transform .06s ease, opacity .2s ease;
}
button:hover, .btn:hover{ transform: translateY(-1px); }
button:active, .btn:active{ transform: translateY(0); opacity:.9; }
.btn-secondary{ background: var(--tc-asphalt); color: var(--tc-mist); }
.btn-danger{ background: var(--tc-plasma); color: white; }

/* Cards & panels */
.card, .panel, .box{
  background: var(--tc-graphite);
  border-radius: var(--tc-radius-lg);
  border: 1px solid #1E242A;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* Inputs & sliders */
input[type='text'], input[type='number'], select, .input{
  background: var(--tc-asphalt);
  color: var(--tc-mist);
  border: 1px solid #2A3036;
  border-radius: var(--tc-radius);
  padding: 10px 12px;
}
input::placeholder{ color:#94A2B3; }
label{ color:#CBD6E2; }

/* Range slider generic styling (WebKit) */
input[type=range]{
  -webkit-appearance: none; appearance: none;
  height: 4px; background: #2F363D; border-radius: 999px; outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--tc-volt); border:2px solid var(--tc-black);
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
input[type=range]::-moz-range-thumb{
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--tc-volt); border:2px solid var(--tc-black);
}

/* Header & footer */
header, .site-header{
  background: linear-gradient(180deg, #0B0D0F 0%, #13171B 100%);
  border-bottom: 1px solid #1E242A;
}
footer, .site-footer{
  background: #0B0D0F;
  border-top: 1px solid #1E242A;
  color:#AEBBCC;
}

/* Utility */
.badge{ background: #26313A; color:#A9C8D3; border-radius:999px; padding:6px 10px; }
.tag-volt{ background: rgba(0,230,255,.12); color: var(--tc-volt); border: 1px solid rgba(0,230,255,.35); }
.hr{ border:0; border-top:1px solid #1E242A; margin:20px 0; }

/* Specific guesses for common classes in your bundle */
.header-logo img{ height: 44px; }
.navbar, .topbar{ background: transparent; }
.primary-cta{ background: var(--tc-volt)!important; color: var(--tc-black)!important; }
.color-chip{ border:1px solid #2A3036; }
.sidebar{ background: var(--tc-graphite); border-right:1px solid #1E242A; }
.preview-area{ background:#0A0C0E; }


/* Segmented buttons specific */
.segbtn{
  background: var(--tc-asphalt) !important;
  color: var(--tc-mist) !important;
  border: 1px solid #2A3036 !important;
}
.segbtn.active{
  background: var(--tc-volt) !important;
  color: var(--tc-black) !important;
  border-color: var(--tc-volt) !important;
}