/* ==========================================
   VALANTIC BUTTON SYSTEM (Figma-kompatibel)
   Basis + Varianten + Größen + Icons
   ========================================== */

/* -------------------------------
   Basis-Button (alle States)
   ------------------------------- */

.vbtn {
  /* Layout (Figma) */
  display: inline-flex;
  padding: 8px 20px;
  justify-content: center;
  align-items: center;
  gap: 10px;

  border-radius: 23px;
  border: none;

  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;

  cursor: pointer;

  /* Default-Variablen (werden von Varianten überschrieben) */
  --btn-bg: #4B26B7;
  --btn-hover-overlay: rgba(16, 12, 42, 0.20);
  --btn-active-overlay: rgba(255, 255, 255, 0.20);
  --btn-focus-border: #F2F2F2;
  --btn-focus-ring: #A78DB6;
  --btn-disabled-bg: #CDCDCD;
  --btn-text-color: #ffffff;

  background: var(--btn-bg);
  color: var(--btn-text-color);

  transition:
    background .12s ease,
    box-shadow .12s ease,
    border-color .12s ease,
    transform .12s ease,
    color .12s ease;
}

/* Unterstreichung global ausschalten, falls a:hover underline hat */
.vbtn,
.vbtn:hover,
.vbtn:focus,
.vbtn:active {
  text-decoration: none !important;
}

/* Hover – dunkler Overlayfilm wie in Figma */
.vbtn:hover:not(:disabled):not(.disabled) {
  background:
    linear-gradient(
      0deg,
      var(--btn-hover-overlay) 0%,
      var(--btn-hover-overlay) 100%
    ),
    var(--btn-bg);
}

/* Focus – Border + Outline (Figma „Outline“) */
.vbtn:focus-visible:not(:disabled):not(.disabled) {
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-focus-border);
  box-shadow: 0 0 0 1.5px var(--btn-focus-ring);
  outline: none;
}

/* Active – heller Overlayfilm */
.vbtn:active:not(:disabled):not(.disabled) {
  background:
    linear-gradient(
      0deg,
      var(--btn-active-overlay) 0%,
      var(--btn-active-overlay) 100%
    ),
    var(--btn-bg);
  transform: scale(.98);
}

/* Disabled – für alle Varianten gleich, Farbe per Variable */
.vbtn:disabled,
.vbtn.disabled {
  background: var(--btn-disabled-bg);
  color: #ffffff;
  cursor: not-allowed;
  box-shadow: none;
  border: none;
  transform: none;
}


/* -------------------------------
   Größen
   ------------------------------- */

.vbtn--sm {
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 20px;
}

.vbtn--lg {
  padding: 11px 26px;
  font-size: 16px;
  border-radius: 26px;
}


/* ==========================================
   Farb-Varianten (aus Figma ableitbar)
   ========================================== */

/* PRIMARY – Vibrant Purple */
.vbtn--primary-purple {
  --btn-bg: var(--Vibrant-Purple, #4B26B7);
  --btn-hover-overlay: rgba(16, 12, 42, 0.20);
  --btn-active-overlay: rgba(255, 255, 255, 0.20);
  --btn-focus-border: #F2F2F2;
  --btn-focus-ring: var(--Lavender, #A78DB6);
  --btn-disabled-bg: var(--Silver, #CDCDCD);
  --btn-text-color: #ffffff;
}

/* ACCENT – Coral / Peach */
.vbtn--accent-coral {
  --btn-bg: var(--Coral-Red-Peach, #FF6A5C);
  --btn-hover-overlay: rgba(16, 12, 42, 0.20);  /* wie Purple, bei Bedarf ändern */
  --btn-active-overlay: rgba(255, 255, 255, 0.20);
  --btn-focus-border: #FCE5DF;
  --btn-focus-ring: #F29C86;
  --btn-disabled-bg: var(--Silver, #CDCDCD);
  --btn-text-color: #ffffff;
}

/* INFO – Blue */
.vbtn--info-blue {
  --btn-bg: #3453E1;
  --btn-hover-overlay: rgba(16, 12, 42, 0.20);
  --btn-active-overlay: rgba(255, 255, 255, 0.20);
  --btn-focus-border: #E5EBFF;
  --btn-focus-ring: #9BB3FF;
  --btn-disabled-bg: var(--Silver, #CDCDCD);
  --btn-text-color: #ffffff;
}

/* DARK – Navy */
.vbtn--dark-navy {
  --btn-bg: #1F2A44;
  --btn-hover-overlay: rgba(16, 12, 42, 0.20);
  --btn-active-overlay: rgba(255, 255, 255, 0.15);
  --btn-focus-border: #E2E5EF;
  --btn-focus-ring: #A5B0CD;
  --btn-disabled-bg: var(--Silver, #CDCDCD);
  --btn-text-color: #ffffff;
}

/* LIGHT – White mit dunkler Schrift */
.vbtn--light {
  --btn-bg: #FFFFFF;
  --btn-hover-overlay: rgba(16, 12, 42, 0.06);    /* sehr leichter dunkler Film */
  --btn-active-overlay: rgba(16, 12, 42, 0.12);
  --btn-focus-border: #E0E0E0;
  --btn-focus-ring: #A7B2C8;
  --btn-disabled-bg: #F0F0F0;
  --btn-text-color: #111111;
}

/* OUTLINE – dunkler Rand, transparenter Hintergrund
   (hier weichen wir etwas von Figma ab und justieren per Variablen) */
.vbtn--outline-dark {
  --btn-bg: transparent;
  --btn-hover-overlay: rgba(16,12,42,0.04);
  --btn-active-overlay: rgba(16,12,42,0.08);
  --btn-focus-border: #111111;
  --btn-focus-ring: #A5A5A5;
  --btn-disabled-bg: transparent;
  --btn-text-color: #111111;
  border: 1.5px solid #111111;
}

/* Für Outline: Hover als gefüllter Button – optional */
.vbtn--outline-dark:hover:not(:disabled):not(.disabled) {
  color: #ffffff;
}

/* Disabled Outline – blasser Rand, optional anpassbar */
.vbtn--outline-dark:disabled,
.vbtn--outline-dark.disabled {
  border-color: #CDCDCD;
  color: #CDCDCD;
}


/* ==========================================
   Icon-Buttons (rund) & Text-Arrow-Buttons
   ========================================== */

/* Nur Icon, runde Buttons */
.vbtn--icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
  gap: 0;
}

/* Icon + Text nebeneinander (Arrow-Buttons) */
.vbtn--with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.vbtn--with-icon svg,
.vbtn--icon svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Inline-Text-Link mit Pfeil (Zeile unten im Screenshot) */
.vbtn-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--Coral-Red-Peach, #FF6A5C);
  text-decoration: none;
  cursor: pointer;
}

.vbtn-link-arrow:hover {
  text-decoration: underline;
}
.vbtn-link-arrow.disabled {
  color: #CDCDCD;
  cursor: default;
  text-decoration: none;
}