:root {
  --vv-bg: #ffffff;
  --vv-surface: #ffffff;
  --vv-surface-soft: #fafafa;
  --vv-surface-muted: #f6f6f6;
  --vv-surface-accent: #fff4f4;
  --vv-text: #111111;
  --vv-text-secondary: #666666;
  --vv-text-tertiary: #999999;
  --vv-text-inverse: #ffffff;
  --vv-border: #e8e8e8;
  --vv-border-strong: #d8d8d8;
  --vv-accent: #e21b23;
  --vv-accent-hover: #c9161d;
  --vv-accent-active: #b81319;
  --vv-accent-soft: #fff0f1;
  --vv-before: #d9d9d9;
  --vv-after: #ef4b54;
  --vv-success: #43865f;
  --vv-success-soft: #f1f8f3;
  --vv-font-heading: "Manrope", "Inter", Arial, sans-serif;
  --vv-font-body: "Inter", Arial, sans-serif;
  --vv-radius-xs: 8px;
  --vv-radius-sm: 12px;
  --vv-radius-md: 20px;
  --vv-radius-lg: 28px;
  --vv-radius-pill: 999px;
  --vv-shadow-card: 0 8px 30px rgba(17,17,17,.055);
  --vv-shadow-card-hover: 0 12px 36px rgba(17,17,17,.085);
  --vv-shadow-floating: 0 12px 40px rgba(17,17,17,.11);
  --vv-space-1: 4px; --vv-space-2: 8px; --vv-space-3: 12px;
  --vv-space-4: 16px; --vv-space-5: 20px; --vv-space-6: 24px;
  --vv-space-8: 32px; --vv-space-10: 40px; --vv-space-12: 48px;
  --vv-space-16: 64px; --vv-space-20: 80px; --vv-space-24: 96px;
  --vv-transition-fast: 160ms ease;
  --vv-transition-base: 240ms ease;
}
html[data-theme="dark"] {
  --vv-bg: #101112; --vv-surface: #171819; --vv-surface-soft: #1c1d1f;
  --vv-surface-muted: #222426; --vv-surface-accent: #291719;
  --vv-text: #f5f5f5; --vv-text-secondary: #adadad; --vv-text-tertiary: #7e7e7e;
  --vv-border: #2b2d2f; --vv-border-strong: #3a3c3f;
  --vv-accent: #f03b43; --vv-accent-hover: #ff4a52; --vv-accent-active: #db3038;
  --vv-accent-soft: #35191c; --vv-before: #55585b; --vv-after: #ff5961;
  --vv-success: #68ad82; --vv-success-soft: #17251c;
  --vv-shadow-card: 0 10px 34px rgba(0,0,0,.28);
  --vv-shadow-card-hover: 0 14px 42px rgba(0,0,0,.4);
  --vv-shadow-floating: 0 16px 48px rgba(0,0,0,.5);
}
.vv-page { background: var(--vv-bg); color: var(--vv-text); font-family: var(--vv-font-body); }
.vv-text { color: var(--vv-text) !important; }
.vv-muted { color: var(--vv-text-secondary) !important; }
.vv-accent { color: var(--vv-accent) !important; }
.vv-surface { background-color: var(--vv-surface) !important; }
.vv-surface-soft { background-color: var(--vv-surface-soft) !important; }
.vv-border { border-color: var(--vv-border) !important; }
.vv-card, .vv-card-soft {
  border: 1px solid var(--vv-border) !important;
  border-radius: var(--vv-radius-md);
}
.vv-card { background: var(--vv-surface) !important; box-shadow: var(--vv-shadow-card); }
.vv-card-soft { background: var(--vv-surface-soft) !important; }
.vv-btn-primary, .vv-btn-secondary {
  min-height: 56px; padding: 0 28px; border-radius: 14px;
  font-family: var(--vv-font-body); font-size: 16px; font-weight: 500;
}
.vv-btn-primary { border: 1px solid var(--vv-accent); background: var(--vv-accent) !important; color: var(--vv-text-inverse) !important; }
.vv-btn-secondary { border: 1px solid var(--vv-border-strong) !important; background: transparent !important; color: var(--vv-text) !important; }
.vv-chip { min-height: 30px; padding: 6px 12px; border: 1px solid var(--vv-border); border-radius: var(--vv-radius-pill); background: var(--vv-surface); color: var(--vv-text-secondary); font-size: 13px; }
.vv-chip-active { border-color: var(--vv-accent); color: var(--vv-accent); background: var(--vv-accent-soft); }
.vv-icon-circle { width: 48px; height: 48px; border-radius: 50%; background: var(--vv-accent-soft); color: var(--vv-accent); }
@media (hover:hover) {
  .vv-card-interactive { transition: transform var(--vv-transition-base), box-shadow var(--vv-transition-base); }
  .vv-card-interactive:hover { transform: translateY(-2px); box-shadow: var(--vv-shadow-card-hover); }
}
@media (prefers-reduced-motion: reduce) {
  .vv-page *, .vv-page *::before, .vv-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* UI kit interaction states */
.vv-btn-primary,
.vv-btn-secondary,
.vv-chip,
.vv-icon-circle,
.vv-faq-row {
  -webkit-tap-highlight-color: transparent;
  transition: color var(--vv-motion-fast,180ms) ease,
              background-color var(--vv-motion-fast,180ms) ease,
              border-color var(--vv-motion-fast,180ms) ease,
              box-shadow var(--vv-motion-fast,180ms) ease,
              transform var(--vv-motion-fast,180ms) ease;
}
.vv-btn-primary:hover {
  background-color: var(--vv-accent-hover);
  box-shadow: 0 8px 20px rgba(226,27,35,.18);
}
.vv-btn-primary:active { background-color: var(--vv-accent-active); transform: translateY(1px); }
.vv-btn-secondary:hover,
.vv-chip:hover,
.vv-icon-circle:hover,
.vv-faq-row:hover { border-color: var(--vv-accent); color: var(--vv-accent); }
.vv-btn-secondary:active,
.vv-chip:active,
.vv-icon-circle:active { background-color: var(--vv-accent-soft); transform: translateY(1px); }
.vv-chip[aria-pressed="true"],
.vv-chip.is-active { background-color: var(--vv-accent); border-color: var(--vv-accent); color: var(--vv-text-inverse); }
.vv-btn-primary:focus-visible,
.vv-btn-secondary:focus-visible,
.vv-chip:focus-visible,
.vv-icon-circle:focus-visible,
.vv-faq-row:focus-visible {
  outline: 3px solid rgba(226,27,35,.36);
  outline-offset: 3px;
}
.vv-btn-primary:disabled,
.vv-btn-secondary:disabled,
.vv-chip:disabled,
.vv-icon-circle:disabled,
.vv-btn-primary[aria-disabled="true"],
.vv-btn-secondary[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .46;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}
@media (hover: none) {
  .vv-btn-primary:hover { background-color: var(--vv-accent); box-shadow: none; }
  .vv-btn-secondary:hover,
  .vv-chip:hover,
  .vv-icon-circle:hover,
  .vv-faq-row:hover { border-color: var(--vv-border); color: inherit; }
}