/*
 * Buttons.
 * Canonical classes: .btn + modifier (.btn--primary | --secondary | --ghost | --danger | --tone) + size (.btn--sm | --lg).
 * Enabled buttons are filled and raised above the surface; disabled buttons drop the fill and color entirely,
 * so the two states never look alike.
 * Legacy class names used by existing markup/JS are listed as aliases next to each variant.
 */

/* Baseline for every <button> and any element carrying .btn (e.g. links); feature styles refine it. */
button,
.btn {
    min-height: var(--control-h-md);
    padding: 6px var(--space-3);
    border: 1px solid var(--color-control-line);
    border-radius: var(--radius-md);
    background: var(--color-control);
    color: var(--color-text-1);
    box-shadow: var(--shadow-control);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    line-height: 1.25;
    letter-spacing: 0;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
}

button:hover:not(:disabled),
.btn:hover:not(:disabled) {
    border-color: var(--color-line-3);
    background: var(--color-control-hover);
}

button:active:not(:disabled),
.btn:active:not(:disabled) {
    transform: translateY(1px);
}

/* Disabled: hollow and flat (no fill, dim edge and text) for every variant below. */
button:disabled,
.btn:disabled,
.btn[aria-disabled='true'] {
    border-color: var(--color-line-1);
    background: transparent;
    color: var(--color-text-disabled);
    box-shadow: none;
    text-shadow: none;
    cursor: not-allowed;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.btn--sm {
    min-height: var(--control-h-sm);
    padding: 4px var(--space-2-5);
    font-size: var(--text-control-sm);
}

.btn--lg {
    min-height: var(--control-h-lg);
    padding: 10px var(--space-5);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
}

/* Primary: the one decisive action in a region. */
.btn--primary,
.primary-btn,
.mp-primary-btn {
    border-color: var(--color-gold-3);
    background: linear-gradient(180deg, #d8b46c 0%, #b88f4b 100%);
    color: var(--color-text-inverse);
    font-weight: var(--weight-bold);
    box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.35), var(--shadow-1);
}

.btn--primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled),
.mp-primary-btn:hover:not(:disabled) {
    border-color: var(--color-gold-2);
    background: linear-gradient(180deg, #e4c27c 0%, #c49a53 100%);
}

/* Secondary: supporting actions. */
.btn--secondary,
.secondary-btn,
.mp-secondary-btn,
.panel-action-btn {
    border-color: var(--color-control-line);
    background: var(--color-control);
    color: var(--color-text-1);
}

.btn--secondary:hover:not(:disabled),
.secondary-btn:hover:not(:disabled),
.mp-secondary-btn:hover:not(:disabled),
.panel-action-btn:hover:not(:disabled) {
    border-color: var(--color-line-3);
    background: var(--color-control-hover);
}

.panel-action-btn {
    min-height: var(--control-h-sm);
    padding: 4px var(--space-2-5);
    font-size: var(--text-control-sm);
}

/* Ghost: low-emphasis, toolbar-like actions. */
.btn--ghost,
.form-toggle-btn,
.mp-chip-btn {
    border-color: transparent;
    background: transparent;
    color: var(--color-text-2);
    box-shadow: none;
}

.btn--ghost:hover:not(:disabled),
.form-toggle-btn:hover:not(:disabled),
.mp-chip-btn:hover:not(:disabled) {
    border-color: var(--color-line-2);
    background: var(--color-surface-3);
    color: var(--color-text-1);
}

.form-toggle-btn {
    min-height: var(--control-h-sm);
    padding: 4px var(--space-2-5);
    border-color: var(--color-line-2);
    font-size: var(--text-control-sm);
}

.form-toggle-btn[aria-pressed='true'],
.form-toggle-btn.is-active,
.mp-chip-btn[aria-pressed='true'] {
    border-color: var(--color-gold-line);
    background: var(--color-gold-soft);
    color: var(--color-gold-1);
}

/* Danger: destructive or leaving actions. */
.btn--danger,
.mp-secondary-btn.is-danger {
    border-color: var(--color-danger-line);
    background: var(--color-danger-soft);
    color: var(--color-danger-strong);
}

.btn--danger:hover:not(:disabled),
.mp-secondary-btn.is-danger:hover:not(:disabled) {
    border-color: var(--color-danger);
    background: color-mix(in srgb, var(--color-danger) 22%, transparent);
}

/*
 * Tone: a solid identity-colored action for the buttons pressed every day. The color names the job:
 * .btn--mode enters the content of the surrounding panel (--panel-accent), .btn--claim collects rewards,
 * .btn--buy purchases, .btn--recommend runs a recommended upgrade. Gold .btn--primary stays the growth/confirm action.
 */
.btn--tone {
    --tone: var(--color-gold-2);
    border-color: var(--tone);
    background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 78%, black) 0%, color-mix(in srgb, var(--tone) 60%, black) 100%);
    color: var(--color-text-on-tone);
    font-weight: var(--weight-bold);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), var(--shadow-1);
}

.btn--tone:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--tone) 70%, white);
    background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 88%, black) 0%, color-mix(in srgb, var(--tone) 68%, black) 100%);
}

.btn--mode { --tone: var(--panel-accent, var(--color-gold-2)); }
.btn--claim { --tone: var(--color-success); }
.btn--buy { --tone: var(--color-info); }
/* One-click recommended upgrades; same blue family as the shared .chip--recommend badges. */
.btn--recommend { --tone: var(--color-info); }

/* Square icon-only button. Pair with a .ui-icon child and an aria-label. */
.icon-btn {
    display: inline-grid;
    place-items: center;
    width: var(--control-h-md);
    min-width: var(--control-h-md);
    height: var(--control-h-md);
    min-height: 0;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: var(--color-text-2);
    box-shadow: none;
}

.icon-btn:hover:not(:disabled) {
    border-color: var(--color-line-2);
    background: var(--color-surface-3);
    color: var(--color-text-1);
}

.icon-btn .ui-icon {
    --icon-size: 18px;
}