/* ============================================================
   VentasBoost Design System — visual override layer
   Applied site-wide on top of each page's existing inline <style>.
   Loaded LAST in <head> (via patch_head managed block), so equal-
   specificity rules win by source order — no !important needed for
   class-based elements. Inline style="" attributes are handled by
   scripts/apply_design_system.py.

   Scope: visual layer only — Manrope, red sharp CTAs, blue accent,
   10px hairline cards. Content/structure/infra untouched.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap');

:root {
  /* colors */
  --vb-blue: #1193de;  --vb-blue-600: #0f82c4;  --vb-blue-700: #0c6ba3;  --vb-blue-050: #e7f4fc;
  --vb-red:  #f94e4e;  --vb-red-600:  #ec3d3d;  --vb-red-700:  #d12f2f;  --vb-red-050:  #fdebeb;
  --vb-gold: #ffc103;  --vb-cream: #fffaea;  --vb-green: #1fae5a;
  --vb-ink:  #000;     --vb-text: #3e4042;   --vb-text-soft: #6c6f72;  --vb-text-mute: #9a9da0;
  --vb-line: #e4e6e8;  --vb-line-strong: #c2c2c2;  --vb-surface: #f6f7f8;  --vb-surface-2: #eef0f2;
  --vb-white: #fff;    --vb-black: #111314;  --vb-focus: #2015ff;
  /* type */
  --vb-font: 'Manrope', Arial, 'Helvetica Neue', sans-serif;
  --font-sans: 'Manrope', Arial, 'Helvetica Neue', sans-serif;
  --font-display: 'Manrope', Arial, sans-serif;
  --fs-display-fluid: clamp(34px, 5.6vw, 72px);
  --fs-h1-fluid: clamp(30px, 4.2vw, 52px);
  --fs-h2-fluid: clamp(26px, 3.4vw, 42px);
  --fs-lead: 24px;  --fs-lead-sm: 22px;
  /* spacing / radius / shadow / motion */
  --container-max: 1200px;
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;  --r-pill: 1000px;
  --shadow-sm: 0 2px 8px rgba(17,19,20,.06);
  --shadow-md: 0 10px 30px rgba(17,19,20,.08);
  --shadow-cta: 0 8px 20px rgba(249,78,78,.28);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* — Typography: Manrope everywhere (the AI-chat keeps its own system-ui) — */
body { font-family: var(--vb-font); color: var(--vb-text); }
.vb-nav-logo span,
h1, h2, h3, h4, h5, h6,
.vb-hero h1, .vb-section-header h2, .vb-card h3 { font-family: var(--vb-font); }

/* — Buttons: red, UPPERCASE, sharp corners (class-based system) — */
.vb-btn {
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  transition: background .2s ease-in-out, color .2s ease-in-out, transform .15s ease;
}
.vb-btn--primary { background: var(--vb-red); color: #fff !important; }
.vb-btn--primary:hover { background: var(--vb-red-600); transform: translateY(-1px); }
.vb-btn--primary:active { transform: translateY(1px); }
.vb-btn--ghost {
  background: #fff; color: var(--vb-blue);
  border: 2px solid var(--vb-blue); border-radius: 0;
}
.vb-btn--ghost:hover { background: var(--vb-blue-050); color: var(--vb-blue-700); }
.vb-btn--wa { border-radius: 0; }            /* keep WhatsApp green, just square it */
.vb-btn--wa:hover { transform: translateY(-1px); }

/* — Cards: 10px radius on hairline borders, white surface, no heavy shadow — */
.vb-card,
.vb-case,
.vb-faq-item {
  border-radius: 10px;
  border: 1px solid var(--vb-line);
  background: #fff;
}
.vb-card { background: #fff; }
.vb-card:hover { box-shadow: 0 10px 30px rgba(17,19,20,.08); }
.vb-faq-item[open] { border-color: var(--vb-blue); }
.vb-case-badge { background: var(--vb-blue-050); color: var(--vb-blue); }
.vb-case-quote { border-left-color: var(--vb-green); }

/* — Accent recolor: brand blue replaces the old #2563eb on class elements — */
.vb-nav-contact a:hover,
.vb-nav-links a:hover,
.vb-case-link,
.vb-lang-menu a.active,
.vb-footer-copy a:hover { color: var(--vb-blue); }

/* — Hairline borders + surface tints align to the new palette — */
.vb-nav { border-bottom: 1px solid var(--vb-line); }
.vb-section--gray { background: var(--vb-surface); }
.vb-footer { border-top: 1px solid var(--vb-line); }

/* — Hero accent word uses brand blue — */
.vb-hero h1 span { color: var(--vb-blue); }

/* — Focus ring — */
a:focus-visible, button:focus-visible,
.vb-btn:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--vb-focus);
  outline-offset: 2px;
}
