/* Button base style */
button,
a.button,
input[type="button"],
input[type="submit"],
.btn {
    display: inline-block;
    border-radius: var(--border-radius);
    padding: 0.5rem 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    text-align: center;
    text-decoration: none;
}

/* Primary button */
.btn-primary,
button.btn-primary,
a.button.btn-primary,
input[type="submit"].btn-primary,
input[type="button"].btn-primary {
    background-color: var(--color-accent-cta);
    border: 1px solid var(--color-accent-cta);
    color: #fff;
}

/* Primary button hover */
.btn-primary:hover,
button.btn-primary:hover,
a.button.btn-primary:hover,
input[type="submit"].btn-primary:hover,
input[type="button"].btn-primary:hover {
    background-color: rgba(0,0,0,0.1);
}

/* Secondary button */
.btn-secondary,
button.btn-secondary,
a.button.btn-secondary,
input[type="submit"].btn-secondary,
input[type="button"].btn-secondary {
    background-color: transparent;
    border: 1px solid var(--color-accent-cta);
    color: var(--color-accent-cta);
}

/* Secondary button hover */
.btn-secondary:hover,
button.btn-secondary:hover,
a.button.btn-secondary:hover,
input[type="submit"].btn-secondary:hover,
input[type="button"].btn-secondary:hover {
    background-color: var(--color-accent-cta);
    color: #fff;
}

/* Form elements */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 0.75rem;
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-family: var(--font-family-body);
    box-sizing: border-box;
}

/* Form focus state */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-accent-cta);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}