/* ============================================================
   CoLe's Heart — brand.css  (.ch-* class layer)
   Source of truth: Claude Design System (project b7fb4f).
   Used by BOTH the design previews and the WordPress/Themify rebuild.
   No inline styles, no IDs — style everything through these classes.
   Tokens: brand-tokens.css · Local fonts: brand-fonts.css
   ============================================================ */

/* ---------- Base ---------- */
.ch-root,
.ch-page {
  background: var(--ch-bg);
  color: var(--ch-text);
  font-family: var(--ch-font-body);
  font-size: var(--ch-text-base);
  line-height: var(--ch-leading-normal);
  font-weight: var(--ch-w-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Typography helpers ---------- */
.ch-display {
  font-family: var(--ch-font-display);
  font-weight: var(--ch-w-600, 600);
  line-height: var(--ch-leading-tight);
  letter-spacing: var(--ch-tracking-tight);
  color: var(--ch-ink);
  margin: 0;
}
.ch-h1 { font-family: var(--ch-font-display); font-weight: 600; font-size: var(--ch-text-5xl); line-height: var(--ch-leading-tight); letter-spacing: var(--ch-tracking-tight); color: var(--ch-ink); margin: 0; }
.ch-h2 { font-family: var(--ch-font-display); font-weight: 600; font-size: var(--ch-text-4xl); line-height: var(--ch-leading-tight); color: var(--ch-ink); margin: 0; }
.ch-h3 { font-family: var(--ch-font-display); font-weight: 600; font-size: var(--ch-text-2xl); line-height: var(--ch-leading-snug); color: var(--ch-ink); margin: 0; }
.ch-h4 { font-family: var(--ch-font-body); font-weight: var(--ch-w-semibold); font-size: var(--ch-text-lg); line-height: var(--ch-leading-snug); color: var(--ch-ink); margin: 0; }

.ch-lead { font-size: var(--ch-text-xl); line-height: var(--ch-leading-relaxed); color: var(--ch-ink-soft); font-weight: var(--ch-w-regular); }
.ch-body { font-size: var(--ch-text-base); line-height: var(--ch-leading-normal); color: var(--ch-ink-soft); }
.ch-small { font-size: var(--ch-text-sm); color: var(--ch-ink-mute); }

.ch-eyebrow {
  font-family: var(--ch-font-body);
  font-weight: var(--ch-w-semibold);
  font-size: var(--ch-text-sm);
  letter-spacing: var(--ch-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ch-gold-500);
  display: inline-block;
}
.ch-script {
  font-family: var(--ch-font-script);
  font-weight: var(--ch-w-bold);
  color: var(--ch-gold-400);
  line-height: 1.1;
}
.ch-gold-text { color: var(--ch-gold-400); }
.ch-ink-text { color: var(--ch-ink); }

/* ---------- Buttons ---------- */
.ch-btn {
  font-family: var(--ch-font-body);
  font-weight: var(--ch-w-medium);
  font-size: var(--ch-text-sm);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ch-space-2);
  padding: 0.8em 1.6em;
  border-radius: var(--ch-radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--ch-dur-fast) var(--ch-ease),
              background-color var(--ch-dur) var(--ch-ease),
              box-shadow var(--ch-dur) var(--ch-ease),
              color var(--ch-dur) var(--ch-ease);
  white-space: nowrap;
}
.ch-btn--primary {
  background: var(--ch-gold-400);
  color: var(--ch-on-primary);
  box-shadow: var(--ch-shadow-gold);
}
.ch-btn--primary:hover { background: var(--ch-gold-500); transform: translateY(-2px); }
.ch-btn--primary:active { background: var(--ch-gold-600); transform: translateY(0) scale(0.98); }

.ch-btn--secondary {
  background: transparent;
  color: var(--ch-gold-600);
  border-color: var(--ch-gold-300);
}
.ch-btn--secondary:hover { background: var(--ch-gold-50); border-color: var(--ch-gold-400); }
.ch-btn--secondary:active { transform: scale(0.98); }

.ch-btn--ghost { background: transparent; color: var(--ch-ink-soft); }
.ch-btn--ghost:hover { background: var(--ch-cream-deep); color: var(--ch-ink); }

.ch-btn--lg { font-size: var(--ch-text-base); padding: 0.85em 1.85em; }
.ch-btn--sm { font-size: var(--ch-text-xs); padding: 0.65em 1.25em; }
.ch-btn:focus-visible { outline: none; box-shadow: var(--ch-ring-gold); }
.ch-btn[disabled], .ch-btn--disabled { opacity: 0.5; pointer-events: none; }

/* ---------- Cards ---------- */
.ch-card {
  background: var(--ch-surface-card);
  border: var(--ch-border-card);
  border-radius: var(--ch-radius-lg);
  box-shadow: var(--ch-shadow-sm);
  padding: var(--ch-space-6);
  transition: transform var(--ch-dur) var(--ch-ease-out),
              box-shadow var(--ch-dur) var(--ch-ease-out);
}
.ch-card--hover:hover { transform: translateY(-4px); box-shadow: var(--ch-shadow-lg); }
.ch-card--feature {
  border-radius: var(--ch-radius-xl);
  padding: var(--ch-space-8);
  box-shadow: var(--ch-shadow-md);
}
.ch-card--flush { padding: 0; overflow: hidden; }

/* ---------- Badges / Tags / Chips ---------- */
.ch-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ch-space-1);
  font-weight: var(--ch-w-semibold);
  font-size: var(--ch-text-xs);
  letter-spacing: var(--ch-tracking-wide);
  text-transform: uppercase;
  padding: 0.4em 0.85em;
  border-radius: var(--ch-radius-pill);
  background: var(--ch-gold-50);
  color: var(--ch-gold-600);
}
.ch-badge--solid { background: var(--ch-gold-400); color: #fff; }
.ch-badge--soft-pink   { background: var(--ch-wc-pink);   color: #8a4a55; }
.ch-badge--soft-blue   { background: var(--ch-wc-blue);   color: #3c5a6b; }
.ch-badge--soft-green  { background: var(--ch-wc-green);  color: #466b3d; }

.ch-chip {
  display: inline-flex; align-items: center; gap: var(--ch-space-2);
  padding: 0.55em 1.1em; border-radius: var(--ch-radius-pill);
  background: var(--ch-white); border: 1px solid var(--ch-line);
  font-weight: var(--ch-w-medium); font-size: var(--ch-text-sm); color: var(--ch-ink-soft);
}

/* ---------- Icon bubble (gold line-icon in a soft disc) ---------- */
.ch-icon-bubble {
  width: 64px; height: 64px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--ch-radius-pill);
  background: var(--ch-gold-50);
  color: var(--ch-gold-500);
}
.ch-icon-bubble--solid { background: var(--ch-gradient-gold-soft); color: #fff; }
.ch-icon-bubble--lg { width: 84px; height: 84px; }
.ch-icon-bubble svg { width: 50%; height: 50%; }
/* Themify renders icons as <i> (font icon), not <svg> — size + center it in the bubble */
.ch-icon-bubble i { font-size: 28px; line-height: 1; color: inherit; }
.ch-icon-bubble--lg i { font-size: 36px; }
/* Themify wraps the icon module; keep the bubble a tidy disc and center the glyph */
.ch-icon-bubble .module-icon, .ch-icon-bubble .themify-icon-wrap { display: inline-flex; align-items: center; justify-content: center; margin: 0; }

/* ---------- Sections & layout ---------- */
.ch-section { padding-block: var(--ch-section-y); }
.ch-section--lg { padding-block: var(--ch-section-y-lg); }
.ch-section--alt { background: var(--ch-cream-deep); }
.ch-container { max-width: var(--ch-container); margin-inline: auto; padding-inline: var(--ch-gutter); }
.ch-container--narrow { max-width: var(--ch-container-narrow); }
.ch-stack > * + * { margin-top: var(--ch-space-4); }
.ch-stack-lg > * + * { margin-top: var(--ch-space-6); }

/* ---------- Decorative motifs ---------- */
.ch-divider {
  display: flex; align-items: center; gap: var(--ch-space-3);
  color: var(--ch-gold-300);
}
.ch-divider::before, .ch-divider::after {
  content: ""; height: 1px; flex: 1; background: var(--ch-gold-200);
}
/* Soft dot-grid background (assets/img/dots.png) */
.ch-dots {
  background-image: url("../img/dots.png");
  background-repeat: repeat;
}
/* Watercolor blob backdrop */
.ch-watercolor {
  background: radial-gradient(ellipse at 30% 30%, var(--ch-wc-yellow), transparent 60%),
              radial-gradient(ellipse at 70% 60%, var(--ch-wc-pink), transparent 55%),
              radial-gradient(ellipse at 50% 80%, var(--ch-wc-blue), transparent 55%);
  filter: blur(2px);
  opacity: 0.55;
}
/* Brush-stroke highlight banner (e.g. "DAS ERWARTET EUCH") */
.ch-brush {
  display: inline-block;
  background: var(--ch-gradient-gold-soft);
  color: #fff; font-weight: var(--ch-w-bold);
  letter-spacing: var(--ch-tracking-wide); text-transform: uppercase;
  padding: 0.4em 1.4em; border-radius: 40% 60% 55% 45% / 60% 50% 50% 40%;
}

/* ---------- Forms ---------- */
.ch-field { display: flex; flex-direction: column; gap: var(--ch-space-2); }
.ch-label { font-weight: var(--ch-w-medium); font-size: var(--ch-text-sm); color: var(--ch-ink); }
.ch-input, .ch-textarea, .ch-select {
  font-family: var(--ch-font-body); font-size: var(--ch-text-base);
  color: var(--ch-ink); background: var(--ch-white);
  border: 1.5px solid var(--ch-line); border-radius: var(--ch-radius-md);
  padding: 0.8em 1em; width: 100%;
  transition: border-color var(--ch-dur) var(--ch-ease), box-shadow var(--ch-dur) var(--ch-ease);
}
.ch-input::placeholder, .ch-textarea::placeholder { color: var(--ch-ink-mute); }
.ch-input:focus, .ch-textarea:focus, .ch-select:focus {
  outline: none; border-color: var(--ch-gold-300); box-shadow: var(--ch-ring-gold);
}

/* ---------- Utility ---------- */
.ch-text-center { text-align: center; }
.ch-rounded { border-radius: var(--ch-radius-lg); }
.ch-rounded-xl { border-radius: var(--ch-radius-xl); }
.ch-shadow { box-shadow: var(--ch-shadow-md); }

/* ---------- Theme overrides (Themify forces its own heading font & a:hover color) ---------- */
/* Force the design serif on display headings (theme sets h1..h4 = Poppins globally) */
.ch-display, .ch-h1, .ch-h2, .ch-h3 { font-family: var(--ch-font-display) !important; }
/* Lock button text colors so the theme's a:hover color can't recolor them */
.ch-btn--primary   { color: var(--ch-on-primary) !important; }
.ch-btn--secondary { color: var(--ch-gold-600) !important; }
.ch-btn--ghost     { color: var(--ch-ink-soft) !important; }
/* Italic-gold emphasis inside display headings (e.g. „…<em>füreinander da sind.</em>") */
.ch-display em, .ch-h1 em, .ch-h2 em, .ch-h3 em { font-style: italic; color: var(--ch-gold-500); }
/* Bold emphasis in body copy renders clearly (body is Poppins 300 → <strong> needs a real weight) */
.ch-body strong, .ch-body b { font-weight: 700; color: var(--ch-ink); }