/**
 * Buttons CSS - Standardized Button Styles
 *
 * This file defines base button styles and variants (Primary, Secondary, Outline)
 * that use the Color Manager's UI group system for consistent theming.
 *
 * Color variables are managed by ColorPaletteManager via the "ui-buttons" group:
 * - --ui-buttons-primaryBg
 * - --ui-buttons-primaryText
 * - --ui-buttons-secondaryBg
 * - --ui-buttons-secondaryText
 * - --ui-buttons-outlineBg
 * - --ui-buttons-outlineBorder
 * - --ui-buttons-outlineText
 */

/* ========== BASE BUTTON STYLES ========== */
.masterbtn {
    display: inline-block;
    font-family: inherit;
    font-size: clamp(11px, 1.1vw, 14px);
    font-weight: 500;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    transition: all 0.15s ease-in-out;
    outline: none;
}

.masterbtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.masterbtn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.masterbtn:focus {
    outline: 2px solid var(--ui-borders-borderFocus, var(--color-blue-6));
    outline-offset: 2px;
}

.masterbtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========== PRIMARY BUTTON ========== */
.masterbtn-primary {
    background-color: var(--ui-buttons-primaryBg, #41BAB4);
    color: var(--ui-buttons-primaryText, #FFFFFF);
    padding: clamp(0.4rem, 0.6vw, 0.6rem) clamp(0.8rem, 1.2vw, 1.25rem);
    border-radius: clamp(3px, 0.3vw, 4px);
}

.masterbtn-primary:hover {
    background-color: var(--ui-buttons-primaryBgHover, #38a8a3);
    box-shadow: 0 4px 8px rgba(65, 186, 180, 0.3);
}

.masterbtn-primary:active {
    background-color: var(--ui-buttons-primaryBgActive, #2f918d);
}

/* ========== SECONDARY BUTTON ========== */
.masterbtn-secondary {
    background-color: var(--ui-buttons-secondaryBg, #2E2E2E);
    color: var(--ui-buttons-secondaryText, #FFFFFF);
    padding: clamp(0.4rem, 0.6vw, 0.625rem) clamp(0.8rem, 1.2vw, 1.25rem);
    border-radius: clamp(3px, 0.3vw, 4px);
}

.masterbtn-secondary:hover {
    background-color: var(--ui-buttons-secondaryBgHover, #3f3f3f);
    box-shadow: 0 4px 8px rgba(46, 46, 46, 0.3);
}

.masterbtn-secondary:active {
    background-color: var(--ui-buttons-secondaryBgActive, #1f1f1f);
}

/* ========== OUTLINE BUTTON ========== */
.masterbtn-outline {
    background-color: var(--ui-buttons-outlineBg, transparent);
    color: var(--ui-buttons-outlineText, #2E2E2E);
    border: 1px solid var(--ui-buttons-outlineBorder, #2E2E2E);
    padding: clamp(0.4rem, 0.6vw, 0.625rem) clamp(0.8rem, 1.2vw, 1.25rem);
    border-radius: clamp(3px, 0.3vw, 4px);
}

.masterbtn-outline:hover {
    background-color: var(--ui-buttons-outlineHoverBg, rgba(46, 46, 46, 0.05));
    border-color: var(--ui-buttons-outlineBorderHover, #1f1f1f);
    box-shadow: 0 2px 4px rgba(46, 46, 46, 0.15);
}

.masterbtn-outline:active {
    background-color: var(--ui-buttons-outlineActiveBg, rgba(46, 46, 46, 0.1));
}

/* ========== SIZE VARIANTS ========== */
.masterbtn-sm {
    font-size: clamp(10px, 1vw, 12px);
    padding: clamp(0.3rem, 0.5vw, 0.5rem) clamp(0.6rem, 1vw, 1rem);
}

.masterbtn-lg {
    font-size: clamp(14px, 1.3vw, 16px);
    padding: clamp(0.7rem, 1vw, 1rem) clamp(1.4rem, 2vw, 2rem);
}

/* ========== FULL WIDTH ========== */
.masterbtn-block {
    display: block;
    width: 100%;
}