.tf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-weight: var(--tf-btn-font-weight);
    border-radius: var(--tf-btn-radius);
    border: 1px solid var(--tf-border-color);
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, box-shadow 200ms ease, transform 120ms ease;
    font-family: var(--tf-font-family-base);
    font-size: var(--tf-font-size-base);
    text-decoration: none;
    background: var(--tf-bg-muted);
    color: var(--tf-text-main);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

.tf-btn-primary {
    background: var(--tf-gradient-brand);
    color: var(--tf-text-inverse);
    border-color: var(--tf-color-primary);
    box-shadow: var(--tf-shadow-md);
}

.tf-btn-primary:hover {
    background: linear-gradient(135deg, var(--tf-color-primary), var(--tf-color-primary-hover));
    transform: translateY(-2px);
    box-shadow: var(--tf-shadow-lg);
}

/* Generic hover for all buttons */
.tf-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

/* active (pressed) */
.tf-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* focus / active similar to Bootstrap */
.tf-btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25);
}

/* Outline variants (use `outline` modifier class) */
.tf-btn-outline {
    background: transparent;
    color: var(--tf-text-main);
    border-style: solid;
}

/* colored outline variants */
.tf-btn-outline-primary { background: transparent; color: var(--tf-color-primary); border-color: var(--tf-color-primary); }
.tf-btn-outline-secondary { background: transparent; color: var(--tf-text-main); border-color: var(--tf-border-color); }
.tf-btn-outline-success { background: transparent; color: var(--tf-color-success); border-color: var(--tf-color-success); }
.tf-btn-outline-danger { background: transparent; color: var(--tf-color-danger); border-color: var(--tf-color-danger); }
.tf-btn-outline-warning { background: transparent; color: var(--tf-color-warning); border-color: var(--tf-color-warning); }
.tf-btn-outline-info { background: transparent; color: var(--tf-color-info, #0dcaf0); border-color: var(--tf-color-info, #0dcaf0); }
.tf-btn-outline-dark { background: transparent; color: #212529; border-color: #212529; }
.tf-btn-outline-light { background: transparent; color: #f8f9fa; border-color: #f8f9fa; }

/* utility for full width (bootstrap's btn-block / w-100) */
.tf-btn-block {
    display: inline-flex;
    width: 100%;
}

.tf-btn-icon {
    width: var(--tf-button-height);
    padding-inline: 0;
    aspect-ratio: 1;
}

.tf-btn-icon.tf-btn-sm {
    width: calc(var(--tf-button-height) - 10px);
}

.tf-btn-icon.tf-btn-lg {
    width: calc(var(--tf-button-height) + 6px);
}

/* responsive grouping helper: stacks on small screens */
.tf-btn-group-responsive {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

@media (max-width: 576px) {
    .tf-btn-group-responsive {
        flex-direction: column;
    }
    .tf-btn-group-responsive .tf-btn {
        width: 100%;
    }
}

/* Size helpers */
.tf-btn-sm {
    height: calc(var(--tf-button-height) - 10px);
    padding: 0.25rem 0.5rem;
    font-size: var(--tf-font-size-sm);
    align-items: center;
}

.tf-btn-lg {
    height: calc(var(--tf-button-height) + 6px);
    padding: 0.5rem 1rem;
    font-size: var(--tf-font-size-lg);
}

/* make buttons align vertically and use consistent height */
.tf-btn,
.tf-btn-primary,
.tf-btn-secondary,
.tf-btn-ghost {
    height: var(--tf-button-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tf-btn-secondary {
    /* Secondary follows brand teal */
    background: var(--tf-color-secondary, var(--tf-brand-teal));
    color: var(--tf-text-inverse);
    border-color: var(--tf-color-secondary, var(--tf-brand-teal));
    box-shadow: var(--tf-shadow-teal);
}

.tf-btn-secondary:hover {
    background: linear-gradient(135deg, var(--tf-color-secondary), var(--tf-color-secondary-hover));
    transform: translateY(-2px);
    box-shadow: var(--tf-shadow-lg);
}

/* semantic quick helpers to match Bootstrap token names */
.tf-btn-success { background: var(--tf-color-success); color: #fff; border-color: var(--tf-color-success); }
.tf-btn-danger  { background: var(--tf-color-danger);  color: #fff; border-color: var(--tf-color-danger); }
.tf-btn-warning { background: var(--tf-color-warning); color: #000; border-color: var(--tf-color-warning); }
.tf-btn-info    { background: var(--tf-brand-sky); color: var(--tf-text-inverse); border-color: var(--tf-brand-sky); }
.tf-btn-info:hover { background: var(--tf-gradient-sky); box-shadow: var(--tf-shadow-md); }
.tf-btn-light   { background: var(--tf-bg-surface); color: var(--tf-text-main); border-color: var(--tf-border-color-light); }
.tf-btn-dark    { background: var(--tf-color-gray-900); color: var(--tf-text-inverse); border-color: var(--tf-color-gray-900); }

/* CTA button (brand warm orange) */
.tf-btn-cta { background: var(--tf-gradient-sunrise); color: var(--tf-text-inverse); border-color: var(--tf-color-cta); box-shadow: var(--tf-shadow-sm); }
.tf-btn-cta:hover { background: linear-gradient(90deg, var(--tf-color-cta-hover), var(--tf-color-cta)); transform: translateY(-2px); box-shadow: var(--tf-shadow-lg); }

/* Ghost (transparent) variant with visible border on light backgrounds */
.tf-btn-ghost,
.tf-btn.ghost {
    background: transparent;
    color: var(--tf-text-main);
    border: 1px solid var(--tf-border-color);
}

.tf-btn-ghost:hover,
.tf-btn.ghost:hover {
    background: var(--tf-bg-muted);
}

/* Outline hover: fill with color and invert text for clear contrast */
.tf-btn-outline-primary:hover { background: var(--tf-color-primary); color: var(--tf-text-inverse); border-color: var(--tf-color-primary); }
.tf-btn-outline-secondary:hover { background: var(--tf-bg-muted); color: var(--tf-text-main); border-color: var(--tf-border-color); }
.tf-btn-outline-success:hover { background: var(--tf-color-success); color: var(--tf-text-inverse); border-color: var(--tf-color-success); }
.tf-btn-outline-danger:hover  { background: var(--tf-color-danger);  color: var(--tf-text-inverse); border-color: var(--tf-color-danger); }
.tf-btn-outline-warning:hover { background: var(--tf-color-warning); color: var(--tf-text-main);  border-color: var(--tf-color-warning); }
.tf-btn-outline-info:hover    { background: var(--tf-color-info, #0dcaf0); color: var(--tf-text-main); border-color: var(--tf-color-info, #0dcaf0); }
.tf-btn-outline-dark:hover    { background: #212529; color: #fff; border-color: #212529; }
.tf-btn-outline-light:hover   { background: #f8f9fa; color: #000; border-color: #f8f9fa; }

/* Gentle hover for light/dark filled buttons to ensure legibility */
.tf-btn-light:hover { background: #eef0f2; }
.tf-btn-dark:hover  { filter: brightness(0.95); }

/* disabled */
.tf-btn:disabled,
.tf-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* small accessibility tweak for buttons that act like links */
.tf-btn[aria-disabled="true"] {
    pointer-events: none;
}