/* ==========================================================
   TamRank — Button Component (BEM)
   Gebruik altijd var(--tr-*) — geen hardcoded waarden.
   Dependency: variables.css
   ========================================================== */

/* ── Base ─────────────────────────────────────────────────── */
.tr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tr-space-2);
    font-family: var(--tr-font-family);
    font-weight: var(--tr-font-semibold);
    font-size: var(--tr-text-sm);
    border: var(--tr-btn-border-width) solid transparent;
    border-radius: var(--tr-radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--tr-transition-base);
    white-space: nowrap;
    line-height: 1;
    box-sizing: border-box;
    /* Default = md */
    height: var(--tr-btn-height-md);
    padding: var(--tr-btn-padding-md);
}

.tr-btn:focus-visible {
    outline: none;
    box-shadow: var(--tr-shadow-focus);
}

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

/* ── Sizes ────────────────────────────────────────────────── */
.tr-btn--sm {
    height: var(--tr-btn-height-sm);
    padding: var(--tr-btn-padding-sm);
    font-size: var(--tr-text-sm);
}

.tr-btn--md {
    height: var(--tr-btn-height-md);
    padding: var(--tr-btn-padding-md);
    font-size: var(--tr-text-sm);
}

.tr-btn--lg {
    height: var(--tr-btn-height-lg);
    padding: var(--tr-btn-padding-lg);
    font-size: var(--tr-text-base);
}

/* ── Primary ──────────────────────────────────────────────── */
.tr-btn--primary,
a.tr-btn--primary,
a.tr-btn--primary:visited {
    background: var(--tr-color-primary);
    color: var(--tr-color-white);
    border-color: var(--tr-color-primary);
}

.tr-btn--primary:hover:not(:disabled),
a.tr-btn--primary:hover,
a.tr-btn--primary:focus {
    background: var(--tr-color-primary-hover);
    border-color: var(--tr-color-primary-hover);
    color: var(--tr-color-white);
    box-shadow: var(--tr-shadow-primary-hover);
    transform: translateY(-1px);
}

/* ── Secondary (Outline) ──────────────────────────────────── */
.tr-btn--secondary,
a.tr-btn--secondary,
a.tr-btn--secondary:visited {
    background: transparent;
    color: var(--tr-color-slate-800);
    border-color: var(--tr-color-slate-800);
}

.tr-btn--secondary:hover:not(:disabled),
a.tr-btn--secondary:hover,
a.tr-btn--secondary:focus {
    background: var(--tr-color-slate-800);
    color: var(--tr-color-white);
    box-shadow: var(--tr-shadow-hover);
    transform: translateY(-1px);
}

/* ── Tertiary (Surface) ───────────────────────────────────── */
.tr-btn--tertiary {
    background: var(--tr-color-surface);
    color: var(--tr-color-slate-700);
    border-color: var(--tr-color-surface);
}

.tr-btn--tertiary:hover:not(:disabled) {
    background: var(--tr-color-slate-200);
    border-color: var(--tr-color-slate-200);
    color: var(--tr-color-slate-800);
    box-shadow: var(--tr-shadow-sm);
    transform: translateY(-1px);
}

/* ── Ghost ────────────────────────────────────────────────── */
.tr-btn--ghost {
    background: transparent;
    color: var(--tr-color-slate-600);
    border-color: transparent;
}

.tr-btn--ghost:hover:not(:disabled) {
    background: var(--tr-color-surface);
    color: var(--tr-color-slate-800);
}

/* ── White ────────────────────────────────────────────────── */
.tr-btn--white,
a.tr-btn--white,
a.tr-btn--white:visited {
    background: var(--tr-color-white);
    color: var(--tr-color-primary);
    border-color: var(--tr-color-white);
}

.tr-btn--white:hover:not(:disabled),
a.tr-btn--white:hover,
a.tr-btn--white:focus {
    background: var(--tr-color-base);
    border-color: var(--tr-color-base);
    color: var(--tr-color-primary);
    transform: translateY(-1px);
}

/* ── Destructive ──────────────────────────────────────────── */
.tr-btn--destructive {
    background: var(--tr-color-error);
    color: var(--tr-color-white);
    border-color: var(--tr-color-error);
}

.tr-btn--destructive:hover:not(:disabled) {
    background: var(--tr-color-error-hover);
    border-color: var(--tr-color-error-hover);
    box-shadow: var(--tr-shadow-error);
    transform: translateY(-1px);
}