/* ═══════════════════════════════════════════════════════════════════════
   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 {
  --background:           40 8% 98%;        /* #FAFAF8 — warm off-white */
  --background-elev:      40 8% 99%;        /* #FCFCFA */
  --background-elev-2:    40 8% 96%;        /* #F5F4F1 */
  --sidebar-bg:           40 10% 96%;
  --secondary:            40 10% 94%;       /* #EEEDE9 */
  --border:               40 12% 88%;       /* #E0DDD6 */
  --border-strong:        40 12% 78%;       /* #C7C3B9 */
  --foreground:           30 10% 14%;       /* #272421 — warm near-black */
  --muted-foreground:     30 8% 40%;        /* #6B655F */
  --muted-foreground-2:   30 8% 55%;        /* #938C85 */

  /* 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);
}
.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;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   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 — primary actions stay red; secondary/back adapts */
.kbq-next     { background: hsl(var(--foreground)) !important; color: hsl(var(--background)) !important; }
.kbq-next:hover { background: hsl(var(--muted-foreground)) !important; }
.kbq-submit   { background: hsl(var(--primary)) !important; color: hsl(var(--white)) !important; }
.kbq-submit:hover { background: hsl(var(--primary-hover)) !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; }