/* ═══════════════════════════════════════════════════════════════════════
   KOBAYASHI THEME, shared dark/light CSS variables
   Include once per page. Pair with theme.js to get the floating toggle.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Dark theme, default (per BRAND_KIT.md) */
  --background:           0 0% 7%;          /* #121212 */
  --background-elev:      0 0% 10%;         /* #1A1A1A */
  --background-elev-2:    0 0% 12%;         /* #1F1F1F */
  --sidebar-bg:           0 0% 5%;          /* #0D0D0D */
  --secondary:            0 0% 15%;         /* #262626 */
  --border:               0 0% 18%;         /* #2E2E2E */
  --border-strong:        0 0% 24%;         /* #3D3D3D */
  --foreground:           0 0% 95%;         /* #F2F2F2 */
  --muted-foreground:     0 0% 60%;         /* #999999 */
  --muted-foreground-2:   0 0% 45%;         /* #737373 */

  --primary:              350 72% 44%;      /* #C41E3A, Kobayashi Red */
  --primary-hover:        350 72% 50%;
  --primary-glow:         350 72% 44% / 0.18;

  --kobayashi-gold:       43 74% 49%;
  --success:              142 71% 45%;
  --warning:              38 92% 50%;
  --white:                0 0% 100%;

  /* Theme-aware shadows (stronger in dark, softer in light) */
  --shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.4);
  --shadow-md: 0 8px 24px -4px hsl(0 0% 0% / 0.35);
  --shadow-lg: 0 20px 40px -12px hsl(0 0% 0% / 0.45);

  /* Nav logo filter (white in dark, black in light) */
  --logo-filter: brightness(0) invert(1);

  /* Type + shape */
  --font-sans:       'Inter', system-ui, -apple-system, sans-serif;
  --font-display:    'Bebas Neue', Impact, sans-serif;
  --font-condensed:  'Barlow Condensed', sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, monospace;
  --radius:          0.5rem;
  --radius-lg:       0.75rem;
  --radius-xl:       1rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Light theme, activated via `html.light` (preferred) or `body.light` */
html.light, body.light {
  /* The page used to sit at 0.98 relative luminance with pure white cards, so
     on a card-heavy page the screen was emitting close to full brightness.
     Everything steps down one notch: the page lands at 0.914, just under
     Notion's 0.922 and GitHub's 0.936, and cards drop off pure white.

     Surfaces separate BETTER than before, not worse. Card against page was a
     0.018 luminance gap, which is nearly invisible and left the borders doing
     all the work; it is 0.068 now, so cards read as genuinely raised.

     Text contrast is barely touched and still clears AA everywhere: the
     weakest pairing, muted-foreground-2 on the page, is 4.79 against the 4.5
     threshold. */
  --background:           40 14% 96%;       /* #F6F5F3 */
  --background-elev:      40 20% 99%;       /* #FDFDFC, cards, no longer pure white */
  --background-elev-2:    40 12% 93%;       /* #EFEEEB */
  --sidebar-bg:           40 12% 95%;
  --secondary:            40 10% 90%;       /* #E8E6E3 */
  --border:               40 12% 84%;       /* #DBD8D1 */
  --border-strong:        40 12% 72%;       /* #C0BAAF */
  --foreground:           30 10% 14%;       /* #272421, warm near-black */
  --muted-foreground:     30 8% 40%;        /* #6E665E, 4.96:1 on the page */
  /* was 55%, which measured 2.91:1 and failed AA on prices and spec text */
  --muted-foreground-2:   30 8% 42%;        /* #746D65, 4.59:1 */

  /* primary stays crimson in both themes */

  --shadow-sm: 0 1px 2px 0 hsl(30 10% 14% / 0.06);
  --shadow-md: 0 8px 24px -4px hsl(30 10% 14% / 0.08);
  --shadow-lg: 0 20px 40px -12px hsl(30 10% 14% / 0.12);

  --logo-filter: none;  /* logos in light mode keep their native colors */
}

/* Smooth crossfade when toggling */
html, body {
  transition: background-color 0.35s var(--ease, ease), color 0.35s var(--ease, ease);
  /* Prevent iOS pull-to-refresh from accidentally triggering when momentum
     scrolling overshoots the top. Also prevents the address-bar bounce that
     can read as a "page jump". */
  overscroll-behavior-y: contain;
}
.kb-themed, .kb-themed * { transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease); }

/* ═══ THEME TOGGLE BUTTON (injected by theme.js) ═══ */
.kb-theme-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 150;

  width: 44px;
  height: 44px;
  border-radius: 100px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background-elev));
  color: hsl(var(--foreground));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  overflow: hidden;

  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px);
  transition: all 0.25s var(--ease);
}
.kb-theme-toggle:hover {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.kb-theme-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: transform 0.4s var(--ease), opacity 0.2s;
}
.kb-theme-toggle .kb-toggle-sun    { position: absolute; }
.kb-theme-toggle .kb-toggle-moon   { position: absolute; }

/* Dark mode: show moon, hide sun */
:root:not(.light) .kb-theme-toggle .kb-toggle-sun  { opacity: 0; transform: rotate(-90deg) scale(0.6); }
:root:not(.light) .kb-theme-toggle .kb-toggle-moon { opacity: 1; transform: rotate(0) scale(1); }
/* Light mode: show sun, hide moon */
html.light .kb-theme-toggle .kb-toggle-sun  { opacity: 1; transform: rotate(0) scale(1); }
html.light .kb-theme-toggle .kb-toggle-moon { opacity: 0; transform: rotate(90deg) scale(0.6); }

/* Expanded variant with label (when `data-label="true"`) */
.kb-theme-toggle[data-label="true"] {
  width: auto;
  padding: 0 16px 0 14px;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
}
.kb-theme-toggle[data-label="true"] .kb-toggle-text {
  position: relative;
  display: inline-block;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html, body, .kb-themed, .kb-themed *, .kb-theme-toggle, .kb-theme-toggle svg {
    transition: none !important;
  }
}

/* Hide the floating sun/moon bubble on mobile, it sits at bottom-right
   and overlaps the .kb-mobilebar tab bar (which is also fixed at bottom:0).
   The mobile bar already has its own theme toggle button (#kbNavThemeMobile)
   so the bubble is redundant on small screens. */
@media (max-width: 768px) {
  .kb-theme-toggle { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   KBQUOTE MODAL + FORM, theme-aware overrides
   The quote-form.js script injects its own hardcoded light-mode CSS.
   These overrides make it adapt to the current dark/light theme on all
   preview-dark pages (modal + inline form).
   ═══════════════════════════════════════════════════════════════════════ */

/* Overlay (dim backdrop, stays dark but uses a slightly tuned opacity) */
.kbq-overlay {
  background: hsl(0 0% 0% / 0.6) !important;
}
html.light .kbq-overlay {
  background: hsl(30 10% 14% / 0.45) !important;
}

/* Modal card */
.kbq-modal {
  background: hsl(var(--background-elev)) !important;
  color: hsl(var(--foreground)) !important;
  border: 1px solid hsl(var(--border)) !important;
  box-shadow: var(--shadow-lg) !important;
}
.kbq-modal__title { color: hsl(var(--foreground)) !important; }
.kbq-modal__sub   { color: hsl(var(--muted-foreground)) !important; }
.kbq-modal__close { color: hsl(var(--muted-foreground)) !important; }
.kbq-modal__close:hover { color: hsl(var(--foreground)) !important; }

/* Section headers + labels inside form */
.kbq-step-header { border-bottom: 1px solid hsl(var(--border)) !important; }
.kbq-step-title,
.kbq-section__label {
  color: hsl(var(--foreground)) !important;
}
.kbq-prod-group__title {
  color: hsl(var(--muted-foreground)) !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
}
.kbq-form .kbq-field label,
.kbq-modal .kbq-field label {
  color: hsl(var(--muted-foreground)) !important;
}
.kbq-divider { background: hsl(var(--border)) !important; }

/* Product rows */
.kbq-prod-row {
  background: hsl(var(--background)) !important;
  border: 1px solid hsl(var(--border)) !important;
}
.kbq-prod-row:hover { border-color: hsl(var(--primary) / 0.55) !important; }
.kbq-prod-row.kbq-prod-row--active {
  border-color: hsl(var(--primary)) !important;
  background: hsl(var(--primary) / 0.08) !important;
}
.kbq-prod-name  { color: hsl(var(--foreground)) !important; }
.kbq-prod-price { color: hsl(var(--muted-foreground)) !important; }

/* Quantity stepper */
.kbq-qty-wrap {
  border: 1px solid hsl(var(--border)) !important;
  background: hsl(var(--background)) !important;
}
.kbq-qty-btn {
  background: hsl(var(--secondary)) !important;
  color: hsl(var(--foreground)) !important;
}
.kbq-qty-btn:hover {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--white)) !important;
}
.kbq-qty-input {
  background: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
  border-left: 1px solid hsl(var(--border)) !important;
  border-right: 1px solid hsl(var(--border)) !important;
}

/* Form inputs, scoped under .kbq-form so we don't stomp other page inputs */
.kbq-form input[type="text"],
.kbq-form input[type="email"],
.kbq-form input[type="tel"],
.kbq-form input[type="number"],
.kbq-form select,
.kbq-form textarea {
  background: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
  border: 1px solid hsl(var(--border)) !important;
}
.kbq-form input::placeholder,
.kbq-form textarea::placeholder {
  color: hsl(var(--muted-foreground-2)) !important;
  opacity: 1;
}
.kbq-form input:focus,
.kbq-form select:focus,
.kbq-form textarea:focus {
  border-color: hsl(var(--primary)) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--primary-glow, var(--primary) / 0.2)) !important;
}
.kbq-form select option {
  background: hsl(var(--background-elev)) !important;
  color: hsl(var(--foreground)) !important;
}

/* Subtotal + shipping result boxes */
.kbq-subtotal-box,
.kbq-shipping-result {
  background: hsl(var(--background)) !important;
  border: 1px solid hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
}
.kbq-subtotal-row            { color: hsl(var(--foreground)) !important; }
.kbq-subtotal-row--muted     { color: hsl(var(--muted-foreground)) !important; }
.kbq-subtotal-row--total     {
  color: hsl(var(--foreground)) !important;
  border-top: 1px solid hsl(var(--border)) !important;
}

/* Buttons. The quote flow's primary actions carry the same gold as the
   "Request Quote Instantly" button that opens it, so the entry point and the
   form read as one action rather than two unrelated red buttons. Back stays
   secondary and adapts to the theme.

   Dark ink on the gold, not white: white measures 2.25:1 against it and fails,
   near-black is 8.41:1 and passes AAA.

   These !important rules beat the inline stylesheet quote-form.js injects, so
   this is the authoritative colour; the values there are kept in step as a
   fallback for the case where this sheet fails to load. */
.kbq-next     { background: hsl(var(--kobayashi-gold)) !important; color: #121212 !important; }
.kbq-next:hover { background: hsl(43 74% 55%) !important; }
.kbq-submit   { background: hsl(var(--kobayashi-gold)) !important; color: #121212 !important; }
.kbq-submit:hover { background: hsl(43 74% 55%) !important; }

/* Guided-builder chrome (progress bar, running total, step copy, specs) */
.kbq-progress__track { background: hsl(var(--secondary)) !important; }
.kbq-progress__fill  { background: hsl(var(--primary)) !important; }
.kbq-progress__label { color: hsl(var(--muted-foreground)) !important; }
.kbq-step-sub { color: hsl(var(--muted-foreground)) !important; }
.kbq-runbar {
  background: hsl(var(--background)) !important;
  border: 1px solid hsl(var(--border)) !important;
}
.kbq-runbar__label { color: hsl(var(--muted-foreground)) !important; }
.kbq-runbar .kbq-runsub { color: hsl(var(--foreground)) !important; }
.kbq-step-alert {
  background: hsl(var(--primary) / 0.08) !important;
  border: 1px solid hsl(var(--primary) / 0.4) !important;
  color: hsl(var(--primary)) !important;
}
.kbq-prod-specs { border-top: 1px solid hsl(var(--border)) !important; }
.kbq-spec { color: hsl(var(--muted-foreground-2)) !important; }
.kbq-spec--crew { color: hsl(var(--primary)) !important; }
.kbq-prod-benefit { color: hsl(var(--muted-foreground)) !important; }
.kbq-back {
  background: transparent !important;
  color: hsl(var(--muted-foreground)) !important;
  border: 1px solid hsl(var(--border)) !important;
}
.kbq-back:hover { color: hsl(var(--foreground)) !important; border-color: hsl(var(--border-strong)) !important; }

/* Success screen */
.kbq-success__title { color: hsl(var(--foreground)) !important; }
.kbq-success__desc  { color: hsl(var(--muted-foreground)) !important; }
.kbq-download       { background: hsl(var(--foreground)) !important; color: hsl(var(--background)) !important; }
.kbq-download:hover { background: hsl(var(--muted-foreground)) !important; }
.kbq-checkout-btn       { background: hsl(var(--primary)) !important; color: hsl(var(--white)) !important; }
.kbq-checkout-btn:hover { background: hsl(var(--primary-hover)) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   CART DRAWER (js/cart.js), theme-aware overrides
   The drawer injects hardcoded light-mode styles; re-skin it here so it
   reads correctly on both dark and light preview-dark pages.
   ═══════════════════════════════════════════════════════════════════════ */
.kb-cart-overlay { background: hsl(0 0% 0% / 0.6) !important; }
html.light .kb-cart-overlay { background: hsl(30 10% 14% / 0.45) !important; }

.kb-cart-drawer {
  background: hsl(var(--background-elev)) !important;
  color: hsl(var(--foreground)) !important;
  box-shadow: -8px 0 32px hsl(0 0% 0% / 0.5) !important;
}
.kb-cart-header {
  border-bottom: 1px solid hsl(var(--border)) !important;
}
.kb-cart-title { color: hsl(var(--foreground)) !important; }
.kb-cart-close { color: hsl(var(--muted-foreground)) !important; }
.kb-cart-close:hover { color: hsl(var(--foreground)) !important; }
.kb-cart-empty { color: hsl(var(--muted-foreground)) !important; }

.kb-cart-item { border-bottom: 1px solid hsl(var(--border)) !important; }
.kb-cart-item__img {
  background: hsl(var(--background)) !important;
  border: 1px solid hsl(var(--border)) !important;
}
/* In-drawer 3D thumbnail, still model-viewer, no interaction. */
model-viewer.kb-cart-item__mv {
  width: 80px !important;
  height: 60px !important;
  --progress-bar-color: transparent !important;
  --progress-mask: transparent !important;
  pointer-events: none !important;
  border-radius: 6px;
}
/* Themed placeholder for any SKU that has no GLB, never falls back to a flat photo. */
.kb-cart-item__placeholder,
.cart-item__placeholder,
.summary-item-placeholder {
  width: 80px; height: 60px;
  background:
    radial-gradient(ellipse at center, hsl(var(--primary) / 0.12) 0%, transparent 70%),
    linear-gradient(180deg, hsl(var(--background-elev-2)) 0%, hsl(var(--background)) 100%) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 6px;
}
.summary-item-placeholder { width: 56px; height: 56px; }
.kb-cart-item__name { color: hsl(var(--foreground)) !important; }
.kb-cart-item__sku  { color: hsl(var(--muted-foreground-2)) !important; }
.kb-cart-item__price { color: hsl(var(--primary)) !important; }
.kb-cart-item__qty {
  border: 1px solid hsl(var(--border)) !important;
  background: hsl(var(--background)) !important;
}
.kb-cart-item__qty button {
  background: hsl(var(--secondary)) !important;
  color: hsl(var(--foreground)) !important;
}
.kb-cart-item__qty button:hover {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--white)) !important;
}
.kb-cart-item__qty span { color: hsl(var(--foreground)) !important; }
.kb-cart-item__remove { color: hsl(var(--muted-foreground-2)) !important; }
.kb-cart-item__remove:hover { color: hsl(var(--primary)) !important; }

.kb-cart-footer {
  background: hsl(var(--background)) !important;
  border-top: 1px solid hsl(var(--border)) !important;
}
.kb-cart-row             { color: hsl(var(--muted-foreground)) !important; }
.kb-cart-row--note       { color: hsl(var(--muted-foreground-2)) !important; }
.kb-cart-row--total      {
  color: hsl(var(--foreground)) !important;
  border-top: 2px solid hsl(var(--border-strong)) !important;
}
.kb-cart-row--total span:last-child { color: hsl(var(--primary)) !important; }

.kb-cart-checkout-btn {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--white)) !important;
}
.kb-cart-checkout-btn:hover { background: hsl(var(--primary-hover)) !important; }
.kb-cart-secure      { color: hsl(var(--muted-foreground-2)) !important; }
.kb-cart-viewfull    { color: hsl(var(--muted-foreground)) !important; }
.kb-cart-viewfull:hover { color: hsl(var(--primary)) !important; }

/* Payment-method chooser inside drawer */
.kb-cart-payment-methods {
  border-bottom: 1px solid hsl(var(--border)) !important;
}
.kb-pay-opt {
  background: hsl(var(--background)) !important;
  border: 2px solid hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
}
.kb-pay-opt:hover { border-color: hsl(var(--border-strong)) !important; }
.kb-pay-opt:has(input:checked) {
  border-color: hsl(var(--primary)) !important;
  background: hsl(var(--primary) / 0.08) !important;
}
.kb-pay-opt__name { color: hsl(var(--foreground)) !important; }
.kb-pay-opt__fee  { color: hsl(var(--success)) !important; }