/* buttons.css — Button Component System */

@layer components {
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-height: 2.5rem;
        padding: 0.625rem 1.25rem;
        font-family: var(--font-sans);
        font-size: 0.75rem;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.01em;
        text-transform: uppercase;
        border: 1px solid transparent;
        border-radius: var(--radius-full);
        cursor: pointer;
        transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
        text-decoration: none;
        white-space: nowrap;
    }

    .btn:hover { opacity: 1; }

    /* Primary — Teal solid */
    .btn-primary {
        background: var(--accent-primary);
        color: var(--text-on-accent);
        border-color: var(--accent-primary);
    }

    .btn-primary:hover {
        background: var(--marketing-ink, var(--depth-950));
        border-color: var(--marketing-ink, var(--depth-950));
        color: var(--marketing-paper, var(--brand-white));
    }

    /* Outline */
    .btn-outline {
        background: transparent;
        color: var(--text-main);
        border-color: var(--border-color);
    }

    .btn-outline:hover {
        border-color: var(--accent-primary);
        color: var(--accent-primary);
    }

    /* Danger */
    .btn-danger {
        background: var(--danger);
        color: var(--text-on-danger);
        border-color: var(--danger);
    }

    /* Ghost */
    .btn-ghost {
        background: transparent;
        color: var(--text-muted);
        border-color: transparent;
        padding: 0.5rem 0.75rem;
    }

    .btn-ghost:hover {
        color: var(--text-main);
        background: var(--teal-10);
    }

    /* Marketing variants */
    .btn-pill {
        border-radius: var(--radius-full);
        font-weight: 700;
    }

    .btn-light {
        background: var(--marketing-paper, var(--brand-white));
        color: var(--marketing-ink, var(--depth-950));
        border-color: var(--marketing-paper, var(--brand-white));
    }

    .btn-light:hover {
        background: var(--accent-primary);
        border-color: var(--accent-primary);
        color: var(--marketing-ink, var(--depth-950));
    }

    .btn-dark {
        background: var(--marketing-ink, var(--depth-950));
        border-color: var(--marketing-ink, var(--depth-950));
        color: var(--marketing-paper, var(--brand-white));
    }

    .btn-dark:hover {
        background: var(--marketing-paper, var(--brand-white));
        border-color: var(--marketing-paper, var(--brand-white));
        color: var(--marketing-ink, var(--depth-950));
    }

    /* Sizes */
    .btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.8rem;
    }

    .btn-lg {
        min-height: 2.75rem;
        padding: 0.75rem 1.5rem;
        font-size: 0.78rem;
    }

    .btn-full {
        width: 100%;
    }

    /* Disabled */
    .btn:disabled,
    .btn.disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }
}