/**
 * TRButton Component Styles
 *
 * Reusable button styling for primary actions, secondary actions, etc.
 */

.tr-button {
    height: var(--tr-button-height);
    padding: 0 var(--tr-space-lg);
    border: none;
    border-radius: var(--tr-button-radius);
    font-size: var(--tr-font-size-body);
    font-weight: var(--tr-font-weight-bold);
    cursor: pointer;
    transition: all var(--tr-transition-fast);
    white-space: nowrap;
}

/* Primary variant */
.tr-button--primary {
    background: var(--tr-color-accent);
    color: #10160c;
}

.tr-button--primary:active {
    opacity: 0.9;
    transform: scale(0.98);
}

/* Secondary variant */
.tr-button--secondary {
    background: var(--tr-color-surface);
    color: var(--tr-color-text);
    border: var(--tr-button-border-width) solid var(--tr-button-border-color);
}

.tr-button--secondary:active {
    background: var(--tr-color-surface-2);
    border-color: var(--tr-color-accent);
}

/* Outline variant */
.tr-button--outline {
    background: transparent;
    color: var(--tr-color-accent);
    border: var(--tr-button-border-width) solid var(--tr-button-border-color);
}

.tr-button--outline:active {
    background: var(--tr-color-accent);
    color: #10160c;
}