/* =============================================================
   Vybe Space — Component Utilities  (components.css)
   Sprint 2: Phase 0B design system foundation.
   Additive-only. Uses --vs-* tokens from tokens.css.
   Zero breakage to existing classes.
   ============================================================= */

/* ── Button variants ──────────────────────────────────────── */

.vs-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--vs-space-2);
    padding: var(--vs-space-2) var(--vs-space-5);
    border: none;
    border-radius: var(--vs-radius-md);
    font-family: var(--vs-font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: filter var(--vs-transition), transform var(--vs-transition);
}
.vs-btn:hover  { filter: brightness(1.12); }
.vs-btn:active { transform: scale(0.97); }

.vs-btn-primary {
    background: var(--vs-color-accent);
    color: var(--button-text);
}
.vs-btn-secondary {
    background: var(--vs-color-surface);
    color: var(--vs-color-text);
    border: 1px solid var(--vs-color-border);
}
.vs-btn-danger {
    background: var(--vs-color-accent-alt);
    color: var(--button-text);
}
.vs-btn-ghost {
    background: transparent;
    color: var(--vs-color-accent);
    border: 1px solid var(--vs-color-accent);
}

/* ── Card ─────────────────────────────────────────────────── */

.vs-card {
    background: var(--vs-color-panel);
    border: 1px solid var(--vs-color-border);
    border-radius: var(--vs-radius-lg);
    padding: var(--vs-space-6);
    box-shadow: var(--vs-shadow-card);
}
.vs-card-sm {
    padding: var(--vs-space-4);
    border-radius: var(--vs-radius-md);
}

/* ── Badge / chip ─────────────────────────────────────────── */

.vs-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--vs-space-1);
    padding: var(--vs-space-1) var(--vs-space-3);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.vs-badge-accent  { background: var(--vs-color-accent);     color: var(--button-text); }
.vs-badge-success { background: var(--vs-color-success);    color: var(--button-text); }
.vs-badge-muted   { background: var(--vs-color-surface);    color: var(--vs-color-muted); border: 1px solid var(--vs-color-border); }

.vs-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--vs-space-1);
    padding: 0.2rem var(--vs-space-3);
    border-radius: 999px;
    font-size: 0.82rem;
    background: var(--vs-color-surface);
    color: var(--vs-color-text);
    border: 1px solid var(--vs-color-border);
}

/* ── Divider ──────────────────────────────────────────────── */

.vs-divider {
    border: none;
    border-top: 1px solid var(--vs-color-border);
    margin: var(--vs-space-6) 0;
}

/* ── Text helpers ─────────────────────────────────────────── */

.vs-text-muted   { color: var(--vs-color-muted); }
.vs-text-accent  { color: var(--vs-color-accent); }
.vs-text-success { color: var(--vs-color-success); }
.vs-text-sm      { font-size: 0.85rem; }
.vs-text-xs      { font-size: 0.75rem; }