/* AutoFlow AI — component styles (Button, Badge, Card, Input) — from design system */

.af-btn{
  --_bg: var(--brand); --_fg: var(--white); --_bd: transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:0.5em;
  font-family:var(--font-body); font-weight:var(--fw-semibold);
  border:1px solid var(--_bd); background:var(--_bg); color:var(--_fg);
  border-radius:var(--radius-pill); cursor:pointer; white-space:nowrap;
  text-decoration:none; letter-spacing:-0.01em;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              filter var(--dur-base) var(--ease-out);
}
.af-btn:focus-visible{ outline:none; box-shadow:var(--ring); }
.af-btn:active{ transform:translateY(1px) scale(0.99); }
.af-btn[disabled]{ opacity:0.45; cursor:not-allowed; transform:none; box-shadow:none; filter:saturate(0.7); }
.af-btn--sm{ font-size:var(--fs-sm); padding:0.5rem 0.95rem; }
.af-btn--md{ font-size:var(--fs-base); padding:0.7rem 1.3rem; }
.af-btn--lg{ font-size:var(--fs-lg); padding:0.9rem 1.7rem; }
.af-btn--full{ width:100%; }
.af-btn--primary{ --_bg:var(--brand); --_fg:var(--white); box-shadow:var(--shadow-sm); }
.af-btn--primary:hover:not([disabled]){ background:var(--brand-hover); box-shadow:var(--glow-violet); transform:translateY(-1px); }
.af-btn--gradient{ --_bg:transparent; --_fg:var(--white); background-image:var(--grad-brand); box-shadow:var(--shadow-sm); }
.af-btn--gradient:hover:not([disabled]){ box-shadow:var(--glow-violet); transform:translateY(-1px); filter:saturate(1.08) brightness(1.03); }
.af-btn--pop{ --_bg:var(--pop); --_fg:var(--white); box-shadow:var(--shadow-sm); }
.af-btn--pop:hover:not([disabled]){ background:var(--pop-hover); box-shadow:var(--glow-coral); transform:translateY(-1px); }
.af-btn--secondary{ --_bg:var(--surface-1); --_fg:var(--text-strong); --_bd:var(--border-strong); box-shadow:var(--shadow-xs); }
.af-btn--secondary:hover:not([disabled]){ border-color:var(--border-brand); color:var(--brand); transform:translateY(-1px); }
.af-btn--ghost{ --_bg:transparent; --_fg:var(--text-body); }
.af-btn--ghost:hover:not([disabled]){ background:var(--brand-soft); color:var(--brand); }
.af-btn__i{ display:inline-flex; align-items:center; }
.af-btn__i svg{ width:1.15em; height:1.15em; display:block; }

.af-badge{
  --_bg:var(--violet-100); --_fg:var(--brand);
  display:inline-flex; align-items:center; gap:0.4em;
  font-family:var(--font-mono); font-weight:var(--fw-medium);
  font-size:var(--fs-xs); letter-spacing:0.02em;
  padding:0.32em 0.7em; border-radius:var(--radius-pill);
  background:var(--_bg); color:var(--_fg); line-height:1; white-space:nowrap;
}
.af-badge--solid{ color:var(--white); }
.af-badge--brand{ --_bg:var(--violet-100); --_fg:var(--brand); }
.af-badge--accent{ --_bg:var(--cyan-100); --_fg:var(--accent-hover); }
.af-badge--pop{ --_bg:var(--coral-100); --_fg:var(--coral-600); }
.af-badge--neutral{ --_bg:var(--paper-150); --_fg:var(--slate-600); }
.af-badge--success{ --_bg:var(--green-100); --_fg:var(--green-600); }
.af-badge--gradient{ background-image:var(--grad-brand); color:var(--white); }
.af-badge__dot{ width:0.45em; height:0.45em; border-radius:50%; background:currentColor; }
.af-badge svg{ width:1em; height:1em; display:block; }

.af-card{
  position:relative; display:flex; flex-direction:column; gap:var(--space-3);
  background:var(--surface-1); border:1px solid var(--border-default);
  border-radius:var(--radius-lg); padding:var(--space-6);
  box-shadow:var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.af-card--interactive{ cursor:pointer; }
.af-card--interactive:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--border-brand); }
.af-card--glow:hover{ box-shadow:var(--shadow-brand-lift); }
.af-card--bar::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; border-radius:var(--radius-lg) var(--radius-lg) 0 0; background-image:var(--grad-brand); }
.af-card__icon{ width:48px; height:48px; border-radius:var(--radius-md); display:inline-flex; align-items:center; justify-content:center; background:var(--violet-100); color:var(--brand); margin-bottom:var(--space-1); }
.af-card__icon svg{ width:24px; height:24px; display:block; }
.af-card__eyebrow{ font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--accent-hover); font-weight:var(--fw-medium); }
.af-card__title{ font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--fs-h4); color:var(--text-strong); letter-spacing:-0.01em; margin:0; }
.af-card__body{ font-size:var(--fs-base); color:var(--text-body); line-height:var(--lh-relaxed); margin:0; }

.af-field{ display:flex; flex-direction:column; gap:var(--space-2); font-family:var(--font-body); }
.af-field__label{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text-strong); }
.af-field__error{ font-size:var(--fs-sm); color:var(--danger); font-weight:var(--fw-medium); }
.af-field__error.ok{ color:var(--green-600); }
.af-input{ display:flex; align-items:center; gap:var(--space-3); background:var(--surface-1); border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:0 var(--space-4); transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.af-input:focus-within{ border-color:var(--brand); box-shadow:var(--ring); }
.af-input--md{ height:46px; }
.af-input__control{ flex:1; border:none; outline:none; background:transparent; font-family:var(--font-body); font-size:var(--fs-base); color:var(--text-strong); min-width:0; height:100%; }
.af-input__control::placeholder{ color:var(--text-faint); }
.af-input__icon{ display:inline-flex; color:var(--text-muted); flex:none; }
.af-input__icon svg{ width:18px; height:18px; display:block; }