:root {
    --btn-primary-bg: #4f7cff;
    --btn-primary-hover-bg: #6d8dff;
    --btn-primary-active-bg: #3d66e0;
    --btn-primary-text: #ffffff;
    --btn-primary-shadow: 0 8px 24px rgba(79, 124, 255, 0.38);
    --btn-primary-shadow-hover: 0 10px 28px rgba(79, 124, 255, 0.48);

    --btn-secondary-bg: #ffffff;
    --btn-secondary-hover-bg: #f3f6ff;
    --btn-secondary-border: #d6dce8;
    --btn-secondary-hover-border: #b9c3d6;
    --btn-secondary-text: #111827;

    --btn-ghost-bg: transparent;
    --btn-ghost-hover-bg: color-mix(in srgb, #4f7cff 10%, transparent);
    --btn-ghost-text: #4f7cff;

    --btn-danger-bg: #ef4444;
    --btn-danger-hover-bg: #f87171;
    --btn-danger-active-bg: #dc2626;
    --btn-danger-text: #ffffff;

    --btn-disabled-bg: #e5e7eb;
    --btn-disabled-text: #9ca3af;
    --btn-disabled-border: #e5e7eb;
}

.dark {
    --btn-primary-bg: #6366f1;
    --btn-primary-hover-bg: #7c83ff;
    --btn-primary-active-bg: #4f46e5;
    --btn-primary-text: #ffffff;
    --btn-primary-shadow: 0 8px 28px rgba(99, 102, 241, 0.42);
    --btn-primary-shadow-hover: 0 12px 32px rgba(99, 102, 241, 0.52);

    --btn-secondary-bg: #1a1d21;
    --btn-secondary-hover-bg: #22262b;
    --btn-secondary-border: rgba(255, 255, 255, 0.12);
    --btn-secondary-hover-border: rgba(255, 255, 255, 0.2);
    --btn-secondary-text: #f8fafc;

    --btn-ghost-bg: transparent;
    --btn-ghost-hover-bg: color-mix(in srgb, #7c83ff 14%, transparent);
    --btn-ghost-text: #a5b4fc;

    --btn-danger-bg: #dc2626;
    --btn-danger-hover-bg: #ef4444;
    --btn-danger-active-bg: #b91c1c;
    --btn-danger-text: #ffffff;

    --btn-disabled-bg: #2f3545;
    --btn-disabled-text: #8a91a3;
    --btn-disabled-border: #2f3545;
}

@layer components {
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border: 1px solid transparent;
        font-weight: 600;
        line-height: 1.25;
        text-decoration: none;
        cursor: pointer;
        transition:
            background-color 180ms ease,
            border-color 180ms ease,
            color 180ms ease,
            box-shadow 180ms ease,
            transform 120ms ease,
            opacity 180ms ease;
    }

    .btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--btn-primary-bg) 35%, transparent);
    }

    .btn:disabled,
    .btn[aria-disabled='true'],
    .btn--primary:disabled,
    .btn-primary:disabled,
    .platform-btn-primary:disabled,
    .account-form-actions__submit:disabled,
    .btn--secondary:disabled,
    .btn-secondary:disabled,
    .platform-btn-secondary:disabled,
    .btn--ghost:disabled,
    .btn--danger:disabled,
    .btn-danger:disabled {
        background: var(--btn-disabled-bg) !important;
        border-color: var(--btn-disabled-border) !important;
        color: var(--btn-disabled-text) !important;
        opacity: 1;
        cursor: not-allowed;
        box-shadow: none !important;
        transform: none !important;
        pointer-events: none;
    }

    .btn.is-loading:disabled,
    .btn-primary.is-loading:disabled {
        background: var(--btn-primary-bg) !important;
        border-color: transparent !important;
        color: var(--btn-primary-text) !important;
        opacity: 0.88;
        cursor: wait;
        pointer-events: none;
    }

    .btn--primary,
    .btn-primary,
    .platform-btn-primary,
    .account-form-actions__submit {
        background: var(--btn-primary-bg);
        color: var(--btn-primary-text);
        box-shadow: var(--btn-primary-shadow);
    }

    .btn--primary:hover:not(:disabled):not([aria-disabled='true']),
    .btn-primary:hover:not(:disabled):not([aria-disabled='true']),
    .platform-btn-primary:hover:not(:disabled):not([aria-disabled='true']),
    .account-form-actions__submit:hover:not(:disabled) {
        background: var(--btn-primary-hover-bg);
        color: var(--btn-primary-text);
        box-shadow: var(--btn-primary-shadow-hover);
        transform: translateY(-1px);
    }

    .btn--primary:active:not(:disabled):not([aria-disabled='true']),
    .btn-primary:active:not(:disabled):not([aria-disabled='true']),
    .platform-btn-primary:active:not(:disabled):not([aria-disabled='true']),
    .account-form-actions__submit:active:not(:disabled) {
        background: var(--btn-primary-active-bg);
        transform: translateY(0) scale(0.985);
        box-shadow: var(--btn-primary-shadow);
    }

    .btn--secondary,
    .btn-secondary,
    .platform-btn-secondary {
        background: var(--btn-secondary-bg);
        border-color: var(--btn-secondary-border);
        color: var(--btn-secondary-text);
        box-shadow: none;
    }

    .btn--secondary:hover:not(:disabled):not([aria-disabled='true']),
    .btn-secondary:hover:not(:disabled):not([aria-disabled='true']),
    .platform-btn-secondary:hover:not(:disabled):not([aria-disabled='true']) {
        background: var(--btn-secondary-hover-bg);
        border-color: var(--btn-secondary-hover-border);
        color: var(--btn-secondary-text);
        transform: translateY(-1px);
    }

    .btn--secondary:active:not(:disabled):not([aria-disabled='true']),
    .btn-secondary:active:not(:disabled):not([aria-disabled='true']),
    .platform-btn-secondary:active:not(:disabled):not([aria-disabled='true']) {
        transform: translateY(0) scale(0.985);
    }

    .btn--ghost,
    .account-form-actions__cancel,
    .email-verification-banner__action {
        background: var(--btn-ghost-bg);
        border-color: transparent;
        color: var(--btn-ghost-text);
        box-shadow: none;
    }

    .btn--ghost:hover:not(:disabled):not([aria-disabled='true']),
    .account-form-actions__cancel:hover,
    .email-verification-banner__action:hover {
        background: var(--btn-ghost-hover-bg);
        color: var(--btn-ghost-text);
        text-decoration: none;
        transform: none;
    }

    .btn--danger,
    .btn-danger {
        background: var(--btn-danger-bg);
        color: var(--btn-danger-text);
        box-shadow: 0 8px 24px color-mix(in srgb, var(--btn-danger-bg) 35%, transparent);
    }

    .btn--danger:hover:not(:disabled):not([aria-disabled='true']),
    .btn-danger:hover:not(:disabled):not([aria-disabled='true']) {
        background: var(--btn-danger-hover-bg);
        transform: translateY(-1px);
    }

    .btn--danger:active:not(:disabled):not([aria-disabled='true']),
    .btn-danger:active:not(:disabled):not([aria-disabled='true']) {
        background: var(--btn-danger-active-bg);
        transform: translateY(0) scale(0.985);
    }

    .platform-btn-primary {
        border-radius: 9999px;
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
        font-weight: 500;
    }

    .platform-btn-secondary {
        width: 100%;
        border-radius: 9999px;
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
        font-weight: 500;
    }

    .account-form-actions__submit {
        border-radius: 9999px;
        padding: 0.625rem 1.25rem;
        font-size: 0.8125rem;
        box-shadow: 0 4px 14px color-mix(in srgb, var(--btn-primary-bg) 32%, transparent);
    }

    .account-form-actions__submit:hover:not(:disabled) {
        box-shadow: 0 6px 18px color-mix(in srgb, var(--btn-primary-bg) 38%, transparent);
    }

    .account-form-actions__cancel {
        border-radius: 9999px;
        padding: 0.625rem 1.125rem;
        font-size: 0.8125rem;
        font-weight: 500;
    }

    .email-verification-banner__action {
        border-radius: 12px;
        padding: 0.625rem 1rem;
        font-size: 0.8125rem;
    }

    @media (min-width: 640px) {
        .email-verification-banner__action {
            padding: 0.5rem 0.75rem;
        }
    }
}