/* ============================================================
   Vime Digital — Component styles
   Class-based styles for the React primitives. All values pull
   from design tokens. Shipped to consumers via styles.css.
   ============================================================ */

/* ---------- Button ---------- */
.vime-btn {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.vime-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vime-btn:active { transform: translateY(1px) scale(0.985); }
.vime-btn:disabled, .vime-btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; pointer-events: none; transform: none;
}
.vime-btn--sm { font-size: var(--text-sm); padding: 8px 16px; }
.vime-btn--md { font-size: var(--text-base); padding: 11px 22px; }
.vime-btn--lg { font-size: var(--text-md); padding: 15px 30px; }
.vime-btn__icon { display: inline-flex; width: 1.1em; height: 1.1em; }
.vime-btn__icon svg { width: 100%; height: 100%; }

.vime-btn--primary { background: var(--brand); color: var(--brand-contrast); }
.vime-btn--primary:hover { background: var(--brand-hover); box-shadow: var(--shadow-brand); }
.vime-btn--accent { background: var(--accent); color: var(--accent-contrast); }
.vime-btn--accent:hover { background: var(--vime-lime-300); box-shadow: var(--shadow-accent); }
.vime-btn--secondary { background: transparent; color: var(--brand); border-color: var(--border-default); }
.vime-btn--secondary:hover { border-color: var(--brand); background: var(--vime-purple-50); }
.vime-btn--ghost { background: transparent; color: var(--text-primary); }
.vime-btn--ghost:hover { background: var(--gray-100); }
.vime-btn--inverse { background: var(--white); color: var(--ink); }
.vime-btn--inverse:hover { background: var(--off-white); box-shadow: var(--shadow-md); }

/* ---------- Card ---------- */
.vime-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.vime-card--flat { box-shadow: none; }
.vime-card--raised { box-shadow: var(--shadow-md); border-color: transparent; }
.vime-card--interactive { cursor: pointer; }
.vime-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.vime-card--brand { background: var(--vime-gradient); border-color: transparent; color: var(--text-inverse); }
.vime-card--accent { background: var(--vime-lime); border-color: transparent; color: var(--ink); }

/* ---------- Badge ---------- */
.vime-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-weight: 700;
  font-size: var(--text-2xs); letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-pill); line-height: 1;
}
.vime-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vime-badge--brand { background: var(--vime-purple-100); color: var(--vime-purple-700); }
.vime-badge--accent { background: var(--vime-lime); color: var(--ink); }
.vime-badge--neutral { background: var(--gray-100); color: var(--gray-700); }
.vime-badge--solid { background: var(--brand); color: #fff; }
.vime-badge--success { background: var(--success-soft); color: var(--success); }
.vime-badge--warning { background: var(--warning-soft); color: var(--warning); }
.vime-badge--danger { background: var(--danger-soft); color: var(--danger); }

/* ---------- Tag / Chip ---------- */
.vime-tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-sm);
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: var(--surface-card); color: var(--text-secondary);
  border: 1.5px solid var(--border-default);
  cursor: pointer; transition: all var(--dur-base) var(--ease-out);
}
.vime-tag:hover { border-color: var(--brand); color: var(--brand); }
.vime-tag--active { background: var(--brand); border-color: var(--brand); color: #fff; }
.vime-tag--active:hover { color: #fff; }
.vime-tag__remove { display: inline-flex; opacity: 0.6; }
.vime-tag__remove:hover { opacity: 1; }

/* ---------- Avatar ---------- */
.vime-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); overflow: hidden; flex: none;
  font-family: var(--font-display); font-weight: var(--weight-bold);
  background: var(--vime-purple-100); color: var(--vime-purple-700);
  user-select: none;
}
.vime-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vime-avatar--brand { background: var(--vime-gradient); color: #fff; }
.vime-avatar--accent { background: var(--vime-lime); color: var(--ink); }
.vime-avatar--xs { width: 28px; height: 28px; font-size: 11px; }
.vime-avatar--sm { width: 36px; height: 36px; font-size: 13px; }
.vime-avatar--md { width: 48px; height: 48px; font-size: 17px; }
.vime-avatar--lg { width: 64px; height: 64px; font-size: 22px; }

/* ---------- Input ---------- */
.vime-field { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-body); }
.vime-field__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); }
.vime-field__hint { font-size: var(--text-xs); color: var(--text-muted); }
.vime-field__error { font-size: var(--text-xs); color: var(--danger); font-weight: 600; }
.vime-input {
  font-family: var(--font-body); font-size: var(--text-base); color: var(--text-primary);
  background: var(--surface-card);
  border: 1.5px solid var(--border-default); border-radius: var(--radius-md);
  padding: 11px 14px; width: 100%; box-sizing: border-box;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.vime-input::placeholder { color: var(--text-muted); }
.vime-input:hover { border-color: var(--border-strong); }
.vime-input:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
.vime-input[aria-invalid="true"] { border-color: var(--danger); }
.vime-input:disabled { background: var(--surface-sunken); color: var(--text-muted); cursor: not-allowed; }

/* ---------- Switch ---------- */
.vime-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; gap: var(--space-3); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.vime-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.vime-switch__track {
  width: 46px; height: 26px; border-radius: var(--radius-pill);
  background: var(--gray-300); position: relative; flex: none;
  transition: background var(--dur-base) var(--ease-out);
}
.vime-switch__thumb {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-spring);
}
.vime-switch input:checked + .vime-switch__track { background: var(--brand); }
.vime-switch input:checked + .vime-switch__track .vime-switch__thumb { transform: translateX(20px); }
.vime-switch input:focus-visible + .vime-switch__track { box-shadow: var(--focus-ring); }
.vime-switch--disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Tabs ---------- */
.vime-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-sunken); border-radius: var(--radius-pill); }
.vime-tab {
  font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-sm);
  padding: 8px 18px; border-radius: var(--radius-pill); border: none; background: transparent;
  color: var(--text-secondary); cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.vime-tab:hover { color: var(--text-primary); }
.vime-tab--active { background: var(--surface-card); color: var(--brand); box-shadow: var(--shadow-sm); }
.vime-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- Logo ---------- */
.vime-logo { display: inline-flex; align-items: center; gap: 0; line-height: 0; }
.vime-logo svg { display: block; height: 100%; width: auto; }
.vime-logo--lockup { flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1; }
.vime-logo__tagline {
  font-family: var(--font-mono); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.42em; font-size: 0.30em; padding-left: 0.15em; color: inherit;
}

/* ---------- Checkbox ---------- */
.vime-checkbox { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-primary); user-select: none; }
.vime-checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.vime-checkbox__box {
  width: 20px; height: 20px; border-radius: 6px; flex: none;
  border: 1.5px solid var(--border-strong); background: var(--surface-card);
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.vime-checkbox__box svg { width: 13px; height: 13px; opacity: 0; transform: scale(0.5); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring); }
.vime-checkbox input:checked + .vime-checkbox__box,
.vime-checkbox--indeterminate .vime-checkbox__box { background: var(--brand); border-color: var(--brand); }
.vime-checkbox input:checked + .vime-checkbox__box svg,
.vime-checkbox--indeterminate .vime-checkbox__box svg { opacity: 1; transform: scale(1); }
.vime-checkbox:hover .vime-checkbox__box { border-color: var(--brand); }
.vime-checkbox input:focus-visible + .vime-checkbox__box { box-shadow: var(--focus-ring); }
.vime-checkbox--disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- SelectionBar (bulk-action toolbar) ---------- */
.vime-selectionbar {
  display: inline-flex; align-items: center; gap: 16px;
  background: var(--ink); color: #fff; border-radius: var(--radius-xl);
  padding: 10px 12px 10px 16px; box-shadow: var(--shadow-lg); font-family: var(--font-body);
}
.vime-selectionbar--floating {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: var(--z-toast); animation: vime-sb-in var(--dur-slow) var(--ease-spring) both;
}
@keyframes vime-sb-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.vime-selectionbar__count { display: inline-flex; align-items: center; gap: 11px; font-weight: 600; font-size: 15px; white-space: nowrap; padding-right: 4px; }
.vime-selectionbar__badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 9px;
  border-radius: 9px; background: var(--brand); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
}
.vime-selectionbar__actions { display: flex; align-items: center; gap: 8px; }
.vime-selectionbar__btn {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  border: none; border-radius: 12px; padding: 9px 16px; cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.vime-selectionbar__btn svg { width: 17px; height: 17px; }
.vime-selectionbar__btn--primary { background: var(--brand); color: #fff; }
.vime-selectionbar__btn--primary:hover { background: var(--brand-hover); }
.vime-selectionbar__btn--accent { background: var(--accent); color: var(--accent-contrast); }
.vime-selectionbar__btn--accent:hover { background: var(--vime-lime-300); }
.vime-selectionbar__btn--ghost { background: rgba(255,255,255,0.08); color: #fff; }
.vime-selectionbar__btn--ghost:hover { background: rgba(255,255,255,0.16); }
.vime-selectionbar__close {
  width: 34px; height: 34px; border-radius: 10px; border: none; flex: none;
  background: rgba(255,255,255,0.06); color: var(--gray-300);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.vime-selectionbar__close:hover { background: rgba(255,255,255,0.16); color: #fff; }

/* ---------- Selectable table (data grid pattern) ---------- */
.vime-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); }
.vime-table thead th {
  text-align: left; font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
  padding: 12px 16px; border-bottom: 1px solid var(--border-default);
}
.vime-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); font-size: 14px; }
.vime-table tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.vime-table tbody tr:hover { background: var(--surface-sunken); }
.vime-table tbody tr[data-selected="true"] { background: var(--vime-purple-50); }
.vime-table__check { width: 1px; white-space: nowrap; }