/* kihelfer24 — Tweaks panel + variant overrides for each tweak. */

/* ============ Panel chrome ============ */
.kh-tweaks {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 1000;
  width: min(320px, calc(100vw - 32px));
  max-height: calc(100svh - 32px);
  overflow-y: auto;
  background: var(--et-ivory);
  color: var(--et-near-black);
  border: 1px solid var(--et-border-warm);
  border-radius: var(--et-r-lg);
  box-shadow: 0 16px 48px rgba(20,20,19,0.22), 0 0 0 1px rgba(20,20,19,0.04);
  font-family: var(--et-sans);
  font-size: 14px;
  display: none;
}
.kh-tweaks.open { display: block; }

.kh-tweaks-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--et-border-cream);
}
.kh-tweaks-title {
  font-family: var(--et-serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--et-near-black);
}
.kh-tweaks-close {
  background: none; border: none; padding: 4px;
  color: var(--et-stone); cursor: pointer; line-height: 1;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.kh-tweaks-close:hover { background: var(--et-sand); color: var(--et-near-black); }
.kh-tweaks-close svg { width: 16px; height: 16px; }

.kh-tweaks-body { padding: 8px 16px 16px; }

.kh-tweaks-section { padding: 14px 0; border-top: 1px solid var(--et-border-cream); }
.kh-tweaks-section:first-child { border-top: none; padding-top: 6px; }
.kh-tweaks-section h4 {
  margin: 0 0 4px;
  font-family: var(--et-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--et-stone);
  font-weight: 500;
}
.kh-tweaks-section p {
  margin: 0 0 10px;
  font-size: 12.5px; color: var(--et-olive);
  line-height: 1.4;
}

/* Radio cards */
.kh-tweaks-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.kh-tweaks-options.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.kh-tweak-opt {
  position: relative;
  cursor: pointer;
  border: 1px solid var(--et-border-warm);
  border-radius: var(--et-r-md);
  padding: 10px 10px 8px;
  background: var(--et-ivory);
  transition: border-color .15s, background .15s, transform .05s;
  text-align: left;
  font-family: inherit;
}
.kh-tweak-opt:hover { border-color: var(--et-ring-warm); background: var(--et-parchment); }
.kh-tweak-opt[aria-pressed="true"] {
  border-color: var(--et-near-black);
  background: var(--et-ivory);
  box-shadow: inset 0 0 0 1px var(--et-near-black);
}
.kh-tweak-opt-preview {
  width: 100%; height: 28px;
  border-radius: 5px;
  margin-bottom: 8px;
  overflow: hidden;
  position: relative;
}
.kh-tweak-opt-label {
  font-size: 12px; font-weight: 500;
  color: var(--et-near-black);
  line-height: 1.2;
}
.kh-tweak-opt-sub {
  font-size: 10.5px;
  color: var(--et-olive);
  margin-top: 2px;
  font-family: var(--et-mono);
  letter-spacing: 0.04em;
}

/* Palette previews (split swatch: 60% bg / 40% accent) */
.kh-tweak-opt-preview.swatch {
  display: flex;
}
.kh-tweak-opt-preview.swatch .swatch-bg { flex: 1; }
.kh-tweak-opt-preview.swatch .swatch-accent { width: 40%; }

/* Hero mood previews */
.kh-tweak-opt-preview.hero-preview {
  display: flex; align-items: center; padding: 0 6px;
  font-family: var(--et-serif);
  font-size: 11px;
  letter-spacing: -0.01em;
}
.hero-preview-dark    { background: #141413; color: #d97757; }
.hero-preview-light   { background: #f5f4ed; color: #c96442; border: 1px solid #e8e6dc; }
.hero-preview-bold    { background: #c96442; color: #faf9f5; }

/* Type voice previews */
.kh-tweak-opt-preview.type-preview {
  display: flex; align-items: center; justify-content: center;
  background: var(--et-parchment);
  color: var(--et-near-black);
  font-size: 16px;
  letter-spacing: -0.015em;
}
.type-preview-editorial { font-family: var(--et-serif); font-style: italic; font-weight: 500; }
.type-preview-modern    { font-family: var(--et-sans); font-weight: 600; }
.type-preview-industrial{ font-family: var(--et-mono); font-weight: 500; text-transform: uppercase; font-size: 12px; letter-spacing: 0.1em; }

/* Floating launcher */
.kh-tweaks-launcher {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 1000;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--et-border-warm);
  background: var(--et-ivory);
  color: var(--et-near-black);
  display: none;
  align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(20,20,19,0.12);
}
.kh-tweaks-launcher.show { display: flex; }
.kh-tweaks-launcher svg { width: 18px; height: 18px; }

@media (max-width: 480px) {
  .kh-tweaks { right: 8px; bottom: 8px; left: 8px; width: auto; }
  .kh-tweaks-launcher { right: 8px; bottom: 8px; }
}

/* ===================================================================
   VARIANT OVERRIDES — these classes toggle on <html> via tweaks.js
   =================================================================== */

/* ---------- PALETTE PRESETS ---------- */
/* Default = warm-parchment, no overrides needed (tokens.css values) */

html[data-palette="steel-workshop"] {
  --et-terracotta: #3f6b8a;
  --et-coral: #5a87a4;
  --et-parchment: #eeefec;
  --et-ivory: #f7f8f5;
  --et-sand: #dfe0dc;
  --et-near-black: #141617;
  --et-dark-surface: #2b2e30;
  --et-deep-dark: #141617;
  --et-charcoal: #454849;
  --et-olive: #55585a;
  --et-stone: #82868a;
  --et-border-cream: #e5e6e2;
  --et-border-warm: #d4d6d1;
  --et-ring-warm: #d4d6d1;
}

html[data-palette="forest-linen"] {
  --et-terracotta: #5b7a4a;
  --et-coral: #7a9963;
  --et-parchment: #f2f1e7;
  --et-ivory: #faf9f2;
  --et-sand: #e2e1d3;
  --et-near-black: #1a1d17;
  --et-dark-surface: #2d322a;
  --et-deep-dark: #1a1d17;
  --et-charcoal: #454a41;
  --et-olive: #5a5f54;
  --et-stone: #82867b;
  --et-border-cream: #ebe9dc;
  --et-border-warm: #dcdacd;
  --et-ring-warm: #dcdacd;
}

html[data-palette="bold-adobe"] {
  --et-terracotta: #b8421f;
  --et-coral: #d16738;
  --et-parchment: #f6f0e7;
  --et-ivory: #fbf7ee;
  --et-sand: #ebe2d1;
  --et-near-black: #1a1512;
  --et-dark-surface: #332b25;
  --et-deep-dark: #1a1512;
  --et-charcoal: #4d443d;
  --et-olive: #5f554d;
  --et-stone: #8a8279;
  --et-border-cream: #f0e9dc;
  --et-border-warm: #e2d9c9;
  --et-ring-warm: #e2d9c9;
}

/* ---------- HERO MOOD ---------- */
/* Default = dark-studio (current styles) */

/* Light, inverted hero — parchment bg, dark text */
html[data-hero="inverted"] .kh-hero {
  background: var(--et-parchment);
  color: var(--et-near-black);
}
html[data-hero="inverted"] .kh-hero::before {
  background: radial-gradient(circle, rgba(201,100,66,0.22), transparent 70%);
  opacity: 0.7;
}
html[data-hero="inverted"] .kh-hero::after {
  background: radial-gradient(circle, rgba(20,20,19,0.06), transparent 70%);
}
html[data-hero="inverted"] .kh-hero h1 { color: var(--et-near-black); }
html[data-hero="inverted"] .kh-hero-sub { color: var(--et-charcoal); }
html[data-hero="inverted"] .kh-hero-eyebrow { color: var(--et-terracotta); }
html[data-hero="inverted"] .kh-hero-eyebrow::before { background: var(--et-terracotta); }
html[data-hero="inverted"] .kh-consent { color: var(--et-charcoal); }
html[data-hero="inverted"] .kh-consent-box { border-color: var(--et-stone); }
html[data-hero="inverted"] .kh-scroll-hint { color: var(--et-stone); }
html[data-hero="inverted"] .kh-topbar {
  background: rgba(245,244,237,0.92);
  border-bottom-color: var(--et-border-cream);
}
html[data-hero="inverted"] .kh-wordmark { color: var(--et-near-black); }
html[data-hero="inverted"] .kh-topbar-meta { color: var(--et-olive); }

/* Brand bold — terracotta hero */
html[data-hero="brand-bold"] .kh-hero {
  background: var(--et-terracotta);
  color: var(--et-ivory);
}
html[data-hero="brand-bold"] .kh-hero::before {
  background: radial-gradient(circle, rgba(20,20,19,0.18), transparent 70%);
}
html[data-hero="brand-bold"] .kh-hero::after {
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
}
html[data-hero="brand-bold"] .kh-hero h1 { color: var(--et-ivory); }
html[data-hero="brand-bold"] .kh-hero h1 em { color: var(--et-near-black); font-style: italic; }
html[data-hero="brand-bold"] .kh-hero-sub { color: rgba(255,255,255,0.85); }
html[data-hero="brand-bold"] .kh-hero-eyebrow { color: var(--et-near-black); }
html[data-hero="brand-bold"] .kh-hero-eyebrow::before { background: var(--et-near-black); }
html[data-hero="brand-bold"] .kh-consent { color: rgba(255,255,255,0.9); }
html[data-hero="brand-bold"] .kh-consent-box { border-color: rgba(255,255,255,0.6); }
html[data-hero="brand-bold"] .kh-consent input:checked + .kh-consent-box {
  background: var(--et-near-black); border-color: var(--et-near-black);
}
html[data-hero="brand-bold"] .kh-consent a { color: var(--et-near-black); font-weight: 600; }
html[data-hero="brand-bold"] .kh-scroll-hint { color: rgba(255,255,255,0.75); }
html[data-hero="brand-bold"] .kh-topbar {
  background: rgba(20,20,19,0.85);
}
html[data-hero="brand-bold"] .kh-chat-shell-hero {
  box-shadow: 0 24px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.2);
}

/* ---------- TYPE VOICE ---------- */
/* Default = editorial (serif headlines, sans body) — no overrides */

/* Modern — sans throughout, tighter */
html[data-type="modern"] .kh-hero h1,
html[data-type="modern"] .kh-h2,
html[data-type="modern"] .kh-tile-title,
html[data-type="modern"] .kh-vs-card h3,
html[data-type="modern"] .kh-stat-label,
html[data-type="modern"] .kh-cta-banner-headline,
html[data-type="modern"] .kh-pullquote,
html[data-type="modern"] .kh-wasserrohr-h2,
html[data-type="modern"] .kh-wasserrohr-emph,
html[data-type="modern"] .kh-schluss h2 {
  font-family: var(--et-sans);
  font-weight: 700;
  letter-spacing: -0.025em;
}
html[data-type="modern"] .kh-hero h1 em { font-style: normal; }
html[data-type="modern"] .kh-pullquote { font-style: normal; }
html[data-type="modern"] .kh-stat-value { font-family: var(--et-sans); font-weight: 700; letter-spacing: -0.04em; }
html[data-type="modern"] .kh-wordmark { font-family: var(--et-sans); font-weight: 700; }
html[data-type="modern"] .kh-tile-num { font-family: var(--et-sans); font-weight: 700; }
html[data-type="modern"] .kh-chat-title { font-family: var(--et-sans); font-weight: 600; }
html[data-type="modern"] .kh-bubble { font-family: var(--et-sans); }

/* Industrial — mono headlines, all-caps, technical feel */
html[data-type="industrial"] .kh-hero h1,
html[data-type="industrial"] .kh-h2,
html[data-type="industrial"] .kh-schluss h2,
html[data-type="industrial"] .kh-cta-banner-headline,
html[data-type="industrial"] .kh-wasserrohr-h2 {
  font-family: var(--et-mono);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
  line-height: 1.12;
}
html[data-type="industrial"] .kh-hero h1 em {
  font-style: normal;
  background: var(--et-terracotta);
  color: var(--et-ivory);
  padding: 0 6px;
  border-radius: 2px;
}
html[data-type="industrial"] .kh-tile-title,
html[data-type="industrial"] .kh-vs-card h3,
html[data-type="industrial"] .kh-stat-label {
  font-family: var(--et-sans); font-weight: 600;
}
html[data-type="industrial"] .kh-stat-value {
  font-family: var(--et-mono); font-weight: 500;
}
html[data-type="industrial"] .kh-pullquote {
  font-family: var(--et-mono); font-style: normal;
  font-size: clamp(15px, 3.4vw, 18px); line-height: 1.5;
  letter-spacing: 0;
}
html[data-type="industrial"] .kh-tile-num {
  font-family: var(--et-mono); font-weight: 500;
  font-size: 28px;
}
html[data-type="industrial"] .kh-wordmark {
  font-family: var(--et-mono); font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: lowercase;
}
html[data-type="industrial"] .kh-bubble { font-family: var(--et-sans); }