/* ============================================================
   VarthAI — COMPONENT STYLES
   Lifted verbatim from the VarthAI Design System component set
   (class-based, token-driven). Only the components used by the
   marketing site are included: Button, Badge, Tag, Card, StatCard,
   Avatar, Callout, Input, Select, Textarea, Dialog.
   ============================================================ */

/* ---- Badge ---- */
.vt-badge{
  display:inline-flex; align-items:center; gap:0.35em;
  font-family:var(--font-ui); font-size:var(--text-xs); font-weight:var(--weight-semibold);
  line-height:1; padding:0.3em 0.6em; border-radius:var(--radius-sm);
  white-space:nowrap;
}
.vt-badge--dot::before{ content:""; width:6px; height:6px; border-radius:var(--radius-pill); background:currentColor; }
.vt-badge--neutral{ background:var(--color-surface-sunken); color:var(--text-secondary); }
.vt-badge--brand{ background:var(--terracotta-100); color:var(--terracotta-700); }
.vt-badge--accent{ background:var(--saffron-50); color:var(--saffron-700); }
.vt-badge--success{ background:var(--success-bg); color:var(--success); }
.vt-badge--solid{ background:var(--primary); color:var(--on-primary); }
.vt-badge--outline{ background:transparent; border:var(--border-width) solid var(--border-strong); color:var(--text-secondary); }

/* ---- Callout ---- */
.vt-callout{
  display:flex; gap:0.85rem; align-items:flex-start;
  font-family:var(--font-ui); font-size:var(--text-sm); line-height:var(--leading-normal);
  padding:var(--space-4); border-radius:var(--radius-md);
  border:var(--border-width) solid var(--border);
  background:var(--color-surface-warm); color:var(--text-primary);
}
.vt-callout__icon{ flex:none; margin-top:1px; color:var(--primary); }
.vt-callout__body{ display:flex; flex-direction:column; gap:0.2rem; }
.vt-callout__title{ font-weight:var(--weight-semibold); }
.vt-callout__text{ color:var(--text-secondary); }
.vt-callout--success{ background:var(--success-bg); }
.vt-callout--success .vt-callout__icon{ color:var(--success); }

/* ---- Tag ---- */
.vt-tag{
  display:inline-flex; align-items:center; gap:0.4em;
  font-family:var(--font-ui); font-size:var(--text-sm); font-weight:var(--weight-medium);
  line-height:1; padding:0.4em 0.75em; border-radius:var(--radius-pill);
  background:var(--color-surface); border:var(--border-width) solid var(--border-strong);
  color:var(--text-secondary);
  transition:var(--transition-colors);
}
.vt-tag--brand{ background:var(--terracotta-50); border-color:var(--terracotta-200); color:var(--terracotta-700); }

/* ---- Button ---- */
.vt-btn{
  --_bg: var(--primary);
  --_fg: var(--on-primary);
  --_bd: transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:0.55em;
  font-family:var(--font-ui); font-weight:var(--weight-semibold);
  line-height:1; white-space:nowrap; cursor:pointer;
  border:var(--border-width-thick) solid var(--_bd);
  background:var(--_bg); color:var(--_fg);
  border-radius:var(--radius-md);
  transition:var(--transition-colors), transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
  text-decoration:none; user-select:none;
}
.vt-btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.vt-btn:active{ transform:translateY(1px); }
.vt-btn[disabled], .vt-btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; transform:none; }
.vt-btn--sm{ font-size:var(--text-sm); padding:0.5rem 0.85rem; border-radius:var(--radius-sm); }
.vt-btn--md{ font-size:var(--text-sm); padding:0.7rem 1.15rem; }
.vt-btn--lg{ font-size:var(--text-md); padding:0.9rem 1.6rem; border-radius:var(--radius-lg); }
.vt-btn--primary{ --_bg:var(--primary); --_fg:var(--on-primary); box-shadow:var(--shadow-brand); }
.vt-btn--primary:hover{ --_bg:var(--primary-hover); }
.vt-btn--primary:active{ --_bg:var(--primary-active); }
.vt-btn--secondary{ --_bg:var(--color-surface); --_fg:var(--text-primary); --_bd:var(--border-strong); box-shadow:var(--shadow-xs); }
.vt-btn--secondary:hover{ --_bg:var(--color-surface-warm); --_bd:var(--terracotta-300); }
.vt-btn--ink{ --_bg:var(--ink); --_fg:var(--text-on-dark); }
.vt-btn--ink:hover{ --_bg:var(--ink-hover); }
.vt-btn--ghost{ --_bg:transparent; --_fg:var(--primary); --_bd:transparent; }
.vt-btn--ghost:hover{ --_bg:var(--primary-soft); }
.vt-btn--block{ width:100%; }

/* ---- Field / Input / Select / Textarea ---- */
.vt-field{ display:flex; flex-direction:column; gap:0.4rem; font-family:var(--font-ui); }
.vt-field__label{ font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--text-primary); }
.vt-field__req{ color:var(--primary); margin-left:2px; }
.vt-field__hint{ font-size:var(--text-xs); color:var(--text-muted); }

.vt-input-wrap{ position:relative; display:flex; align-items:center; }
.vt-input-wrap__icon{ position:absolute; left:0.85rem; display:flex; color:var(--text-muted); pointer-events:none; }

.vt-input{
  width:100%; font-family:var(--font-ui); font-size:var(--text-sm);
  color:var(--text-primary); background:var(--color-surface);
  border:var(--border-width) solid var(--border-strong);
  border-radius:var(--radius-md);
  padding:0.65rem 0.85rem;
  transition:var(--transition-colors), box-shadow var(--dur-fast) var(--ease-standard);
}
.vt-input::placeholder{ color:var(--text-muted); }
.vt-input:hover{ border-color:var(--neutral-400); }
.vt-input:focus{ outline:none; border-color:var(--primary); box-shadow:var(--focus-ring); }
.vt-input--has-start{ padding-left:2.5rem; }

.vt-select-wrap{ position:relative; display:flex; align-items:center; }
.vt-select{
  width:100%; appearance:none; font-family:var(--font-ui); font-size:var(--text-sm);
  color:var(--text-primary); background:var(--color-surface);
  border:var(--border-width) solid var(--border-strong);
  border-radius:var(--radius-md); padding:0.65rem 2.4rem 0.65rem 0.85rem;
  cursor:pointer;
  transition:var(--transition-colors), box-shadow var(--dur-fast) var(--ease-standard);
}
.vt-select:hover{ border-color:var(--neutral-400); }
.vt-select:focus{ outline:none; border-color:var(--primary); box-shadow:var(--focus-ring); }
.vt-select-wrap__chev{ position:absolute; right:0.85rem; pointer-events:none; color:var(--text-muted); display:flex; }

.vt-textarea{
  width:100%; font-family:var(--font-ui); font-size:var(--text-sm);
  color:var(--text-primary); background:var(--color-surface);
  border:var(--border-width) solid var(--border-strong);
  border-radius:var(--radius-md); padding:0.65rem 0.85rem;
  min-height:6rem; resize:vertical; line-height:var(--leading-normal);
  transition:var(--transition-colors), box-shadow var(--dur-fast) var(--ease-standard);
}
.vt-textarea::placeholder{ color:var(--text-muted); }
.vt-textarea:hover{ border-color:var(--neutral-400); }
.vt-textarea:focus{ outline:none; border-color:var(--primary); box-shadow:var(--focus-ring); }

/* ---- Dialog ---- */
.vt-dialog__backdrop[hidden]{ display:none; }
.vt-dialog__backdrop{
  position:fixed; inset:0; z-index:100; background:var(--color-overlay);
  backdrop-filter:blur(3px); display:grid; place-items:center; padding:var(--space-5);
  animation:vt-fade var(--dur-base) var(--ease-standard);
}
.vt-dialog{
  width:100%; max-width:480px; background:var(--color-surface);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-xl);
  border:var(--border-width) solid var(--border);
  overflow:hidden; animation:vt-pop var(--dur-base) var(--ease-entrance);
}
.vt-dialog__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:var(--space-5) var(--space-5) 0; }
.vt-dialog__title{ font-family:var(--font-display); font-weight:var(--weight-regular); font-size:var(--text-xl); color:var(--text-primary); letter-spacing:var(--tracking-tight); }
.vt-dialog__desc{ font-family:var(--font-ui); font-size:var(--text-sm); color:var(--text-secondary); padding:0.35rem var(--space-5) 0; line-height:var(--leading-normal); }
.vt-dialog__body{ padding:var(--space-5); font-family:var(--font-ui); color:var(--text-primary); }
.vt-dialog__foot{ display:flex; justify-content:flex-end; gap:0.6rem; padding:0 var(--space-5) var(--space-5); }
.vt-dialog__x{ flex:none; display:inline-flex; padding:6px; margin:-4px -4px 0 0; border:none; background:transparent; color:var(--text-muted); cursor:pointer; border-radius:var(--radius-sm); transition:var(--transition-colors); }
.vt-dialog__x:hover{ background:var(--color-surface-warm); color:var(--text-primary); }
@keyframes vt-fade{ from{opacity:0} to{opacity:1} }
@keyframes vt-pop{ from{opacity:0; transform:translateY(8px) scale(.98)} to{opacity:1; transform:none} }

/* ---- Avatar ---- */
.vt-avatar{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius-pill); overflow:hidden; flex:none;
  background:var(--terracotta-100); color:var(--terracotta-700);
  font-family:var(--font-ui); font-weight:var(--weight-semibold);
  border:var(--border-width-thick) solid var(--color-surface);
  box-shadow:var(--shadow-xs);
  background-size:cover; background-position:center;
}
.vt-avatar--md{ width:40px; height:40px; font-size:14px; }
.vt-avatar--lg{ width:56px; height:56px; font-size:19px; }

/* ---- Card ---- */
.vt-card{
  background:var(--color-surface);
  border:var(--border-width) solid var(--border);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.vt-card--pad{ padding:var(--space-5); }
.vt-card--warm{ background:var(--color-surface-warm); }
.vt-card--ink{ background:var(--ink); color:var(--text-on-dark); border-color:transparent; }
.vt-card--interactive{ cursor:pointer; }
.vt-card--interactive:hover{ box-shadow:var(--shadow-lg); transform:translateY(-3px); border-color:var(--terracotta-200); }

/* ---- StatCard ---- */
.vt-stat{ display:flex; flex-direction:column; gap:0.35rem; font-family:var(--font-ui); }
.vt-stat__value{ font-family:var(--font-display); font-weight:var(--weight-light); font-size:var(--text-3xl); line-height:1; color:var(--text-primary); letter-spacing:var(--tracking-tight); }
.vt-stat__value em{ font-style:normal; color:var(--primary); }
.vt-stat__label{ font-size:var(--text-sm); color:var(--text-secondary); }