/* ============================================================
   Vitrola Falante — Component styles
   Real CSS (states, transitions) for the React primitives.
   Everything references the design tokens; shipped to consumers
   via styles.css. Class prefix: vf-
   ============================================================ */

/* ---------- Button ---------- */
.vf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--fw-body-medium);
  font-size: var(--fs-body);
  line-height: 1;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: var(--border-thick) solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft),
              transform var(--dur-fast) var(--ease-soft),
              box-shadow var(--dur-fast) var(--ease-soft);
}
.vf-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.vf-btn:active { transform: scale(0.98); }
.vf-btn[disabled], .vf-btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none;
}

.vf-btn--sm { padding: 9px 18px; font-size: var(--fs-body-sm); }
.vf-btn--lg { padding: 18px 38px; font-size: var(--fs-body-lg); }

/* Primary — sage fill, plum text. Soft sage glow over purple. */
.vf-btn--primary {
  background: var(--cta-bg);
  color: var(--cta-text);
  box-shadow: var(--shadow-cta);
}
.vf-btn--primary:hover { background: var(--cta-bg-hover); }
.vf-btn--primary[disabled]:hover { background: var(--cta-bg); }

/* Secondary — sage hairline outline, fills softly on hover. */
.vf-btn--secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.vf-btn--secondary:hover { background: var(--accent); color: var(--plum-800); }

/* On light surfaces the outline button reads in plum. */
.vf-btn--outline-dark {
  background: transparent;
  color: var(--plum-700);
  border-color: var(--border-on-light);
}
.vf-btn--outline-dark:hover { background: var(--plum-700); color: var(--ivory); border-color: var(--plum-700); }

/* Ghost — text only, underline-on-hover feel. */
.vf-btn--ghost {
  background: transparent;
  color: var(--accent);
  padding-left: 10px; padding-right: 10px;
}
.vf-btn--ghost:hover { color: var(--sage-600); }

.vf-btn__icon { display: inline-flex; line-height: 0; }

/* ---------- SectionLabel (eyebrow) ---------- */
.vf-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-body-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
}
.vf-label--ink { color: var(--accent-strong); }
.vf-label__tick { width: 28px; height: 1px; background: currentColor; opacity: 0.6; }

/* ---------- Tag ---------- */
.vf-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-body);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: var(--border-hair) solid var(--border-accent);
  color: var(--accent-strong);
  background: transparent;
}
.vf-tag--solid { background: var(--sage-500); border-color: var(--sage-500); color: var(--plum-800); }
.vf-tag--soft  { background: var(--mint-100); border-color: transparent; color: var(--plum-700); }
.vf-tag--on-dark { color: var(--accent); border-color: var(--border-on-dark); }

/* ---------- Card ---------- */
.vf-card {
  background: var(--surface-card);
  border: var(--border-hair) solid var(--border-on-light);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: var(--shadow-sm);
}
.vf-card--flat { box-shadow: none; }
.vf-card--soft { background: var(--surface-soft); }
/* On the purple ground: a slightly lighter plum card with an ivory hairline. */
.vf-card--dark {
  background: var(--surface-card-dark);
  border-color: var(--border-on-dark);
  color: var(--text-on-dark);
  box-shadow: var(--shadow-md);
}
/* The "stand-out" card (e.g. Psicanálise in the comparison) — sage accent border. */
.vf-card--accent {
  border-color: var(--border-accent);
  border-width: var(--border-thick);
}
.vf-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-display-md);
  line-height: var(--lh-title);
  color: var(--text-strong);
  margin: 0 0 var(--space-3);
}
.vf-card--dark .vf-card__title { color: var(--ivory); }
.vf-card__body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); margin: 0; }
.vf-card--dark .vf-card__body { color: var(--text-on-dark-muted); }

/* ---------- Step (numbered, "Como funciona") ---------- */
.vf-step { display: flex; gap: var(--space-5); align-items: flex-start; }
.vf-step__num {
  font-family: var(--font-display);
  font-weight: var(--fw-display-light);
  font-size: var(--fs-display-lg);
  line-height: 0.9;
  color: var(--accent);
  flex: none;
  min-width: 1.4em;
}
.vf-step__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  font-weight: var(--fw-display);
  line-height: var(--lh-title);
  margin: 0 0 var(--space-2);
  color: var(--text-strong);
}
.vf-step--on-dark .vf-step__title { color: var(--ivory); }
.vf-step__body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); margin: 0; }
.vf-step--on-dark .vf-step__body { color: var(--text-on-dark-muted); }

/* ---------- FaqItem (Perguntas) ---------- */
.vf-faq {
  border-bottom: var(--border-hair) solid var(--border-on-light);
}
.vf-faq--on-dark { border-color: var(--border-on-dark); }
.vf-faq__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  font-weight: var(--fw-display);
  line-height: var(--lh-title);
  color: var(--text-strong);
  transition: color var(--dur-fast) var(--ease-soft);
}
.vf-faq--on-dark .vf-faq__summary { color: var(--ivory); }
.vf-faq__summary::-webkit-details-marker { display: none; }
.vf-faq__summary:hover { color: var(--accent-strong); }
.vf-faq--on-dark .vf-faq__summary:hover { color: var(--accent); }
.vf-faq__sign { flex: none; width: 22px; height: 22px; position: relative; transition: transform var(--dur) var(--ease-soft); }
.vf-faq__sign::before, .vf-faq__sign::after {
  content: ""; position: absolute; inset: 0; margin: auto; background: currentColor; border-radius: 2px;
}
.vf-faq__sign::before { width: 100%; height: 1.5px; }
.vf-faq__sign::after  { width: 1.5px; height: 100%; }
.vf-faq[open] .vf-faq__sign { transform: rotate(45deg); }
.vf-faq__body {
  padding: 0 0 var(--space-5);
  max-width: var(--measure);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.vf-faq--on-dark .vf-faq__body { color: var(--text-on-dark-muted); }

/* ---------- Field / Input / Textarea ---------- */
.vf-field { display: flex; flex-direction: column; gap: var(--space-2); }
.vf-field__label {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-body-medium);
  color: var(--text-body);
}
.vf-field--on-dark .vf-field__label { color: var(--text-on-dark); }
.vf-input, .vf-textarea {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-strong);
  background: var(--ivory);
  border: var(--border-hair) solid var(--border-on-light);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
.vf-textarea { resize: vertical; min-height: 120px; line-height: var(--lh-body); }
.vf-input::placeholder, .vf-textarea::placeholder { color: var(--text-muted); }
.vf-input:focus, .vf-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(167, 210, 174, 0.35);
}
/* On the purple ground, fields sit on a lighter plum with ivory text. */
.vf-field--on-dark .vf-input, .vf-field--on-dark .vf-textarea {
  background: rgba(247, 243, 238, 0.06);
  border-color: var(--border-on-dark);
  color: var(--ivory);
}
.vf-field--on-dark .vf-input::placeholder, .vf-field--on-dark .vf-textarea::placeholder { color: var(--text-on-dark-muted); }