/**
 * Repario Design System — Buttons
 *
 * Standardized button components for the App Shell.
 * All buttons MUST use these classes. Page-specific button
 * classes (td-btn, tn-btn) are deprecated — use rep-btn instead.
 *
 * Usage:
 *   <button class="rep-btn rep-btn-primary">Save</button>
 *   <button class="rep-btn rep-btn-secondary">Cancel</button>
 *   <a class="rep-btn rep-btn-ghost" href="#">Back</a>
 *   <button class="rep-btn rep-btn-danger">Delete</button>
 *   <button class="rep-btn rep-btn-icon"><span class="material-symbols-outlined">edit</span></button>
 *
 * Depends on: tokens.css
 * @package Repario_SaaS
 */

/* ── Base ──────────────────────────────────────────────────────────────── */

.rep-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rep-space-2);
    padding: var(--rep-space-2) var(--rep-space-4);
    border-radius: var(--rep-radius-lg);
    font-size: var(--rep-font-size-sm);
    font-weight: var(--rep-font-weight-bold);
    font-family: var(--rep-font-family-base);
    line-height: 1.5;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    color: var(--rep-text-primary);
    text-decoration: none;
    transition: all var(--rep-transition-fast);
    white-space: nowrap;
    box-sizing: border-box;
}

.rep-btn:disabled,
.rep-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.rep-btn .material-symbols-outlined {
    font-size: 18px;
}

/* ── Primary ───────────────────────────────────────────────────────────── */

.rep-btn-primary {
    background: var(--rep-color-primary-base);
    color: var(--rep-text-inverse);
    border-color: var(--rep-color-primary-base);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--rep-color-primary-base) 25%, transparent);
}

.rep-btn-primary:hover {
    background: var(--rep-color-primary-hover);
    border-color: var(--rep-color-primary-hover);
}

.rep-btn-primary:active {
    background: var(--rep-color-primary-active);
    border-color: var(--rep-color-primary-active);
}

/* ── Secondary ─────────────────────────────────────────────────────────── */

.rep-btn-secondary {
    background: transparent;
    color: var(--rep-text-primary);
    border-color: var(--rep-border-default);
}

.rep-btn-secondary:hover {
    background: var(--rep-bg-hover);
}

/* ── Ghost ─────────────────────────────────────────────────────────────── */

.rep-btn-ghost {
    background: none;
    color: var(--rep-text-secondary);
    border-color: transparent;
}

.rep-btn-ghost:hover {
    background: var(--rep-bg-hover);
    color: var(--rep-text-primary);
}

/* ── Danger ────────────────────────────────────────────────────────────── */

.rep-btn-danger {
    background: transparent;
    color: var(--rep-color-semantic-error-base);
    border-color: color-mix(in srgb, var(--rep-color-semantic-error-base) 30%, transparent);
}

.rep-btn-danger:hover {
    background: color-mix(in srgb, var(--rep-color-semantic-error-base) 8%, transparent);
}

/* ── Icon-only ─────────────────────────────────────────────────────────── */

.rep-btn-icon {
    padding: var(--rep-space-2);
    border-radius: var(--rep-radius-lg);
}

/* ── Sizes ─────────────────────────────────────────────────────────────── */

.rep-btn-sm {
    padding: var(--rep-space-1) var(--rep-space-3);
    font-size: var(--rep-font-size-xs);
}

.rep-btn-sm .material-symbols-outlined {
    font-size: 16px;
}

.rep-btn-lg {
    padding: var(--rep-space-3) var(--rep-space-6);
    font-size: var(--rep-font-size-base);
}