/* Buttons */
.btn {
    --button-background: var(--color-charcoal);
    --button-color: var(--color-white);
    --button-border: var(--color-charcoal);
    --button-hover-background: var(--color-text);
    --button-hover-color: var(--color-white);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 2.75rem;
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--button-border);
    border-radius: var(--radius-sm);
    background: var(--button-background);
    color: var(--button-color);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-heading);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-base) var(--ease-standard),
        color var(--transition-base) var(--ease-standard),
        border-color var(--transition-base) var(--ease-standard);
}

.btn-primary {
    --button-background: var(--color-charcoal);
    --button-color: var(--color-white);
    --button-border: var(--color-charcoal);
}

.btn-secondary {
    --button-background: var(--color-surface);
    --button-color: var(--color-charcoal);
    --button-border: var(--color-border);
    --button-hover-background: var(--color-silver-light);
    --button-hover-color: var(--color-charcoal);
}

.btn-outline {
    --button-background: transparent;
    --button-color: var(--color-charcoal);
    --button-border: var(--color-charcoal);
    --button-hover-background: var(--color-surface);
    --button-hover-color: var(--color-charcoal);
}

.btn-icon {
    width: 2.75rem;
    padding: var(--space-3);
    flex-shrink: 0;
}

@media (hover: hover) {
    .btn:hover:not(:disabled, [aria-disabled="true"]) {
        background: var(--button-hover-background);
        color: var(--button-hover-color);
    }
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Inline SVGs and the local Lucide sprite inherit the surrounding color. */
.icon {
    display: inline-block;
    width: var(--icon-size, 1.25em);
    height: var(--icon-size, 1.25em);
    flex-shrink: 0;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Forms: leave native checkboxes, radios and specialized controls intact. */
.form-field {
    display: grid;
    gap: var(--space-2);
    margin-block-end: var(--space-5);
    min-width: 0;
}

label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="button"], [type="submit"], [type="reset"], [type="image"]), textarea, select) {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--field-border, var(--color-input-border));
    border-radius: var(--radius-sm);
    background: var(--color-white);
    color: var(--color-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    transition: border-color var(--transition-fast) var(--ease-standard),
        background-color var(--transition-fast) var(--ease-standard);
}

textarea {
    min-height: 8rem;
    resize: vertical;
}

select {
    cursor: pointer;
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-soft);
    opacity: 1;
}

:where(input, textarea, select):focus {
    border-color: var(--field-border, var(--color-focus));
}

:where(input, textarea, select):disabled {
    background: var(--color-surface);
    color: var(--color-text-soft);
    cursor: not-allowed;
}

:where(input, textarea)[readonly] {
    background: var(--color-off-white);
}

input:where([type="checkbox"], [type="radio"]) {
    accent-color: var(--color-charcoal);
}

.form-hint,
.form-error,
.form-success {
    margin: 0;
    font-size: var(--font-size-sm);
}

.form-hint { color: var(--color-text-soft); }
.form-error { color: var(--color-error); }
.form-success { color: var(--color-success); }

.form-field.is-error,
[aria-invalid="true"] {
    --field-border: var(--color-error);
}

.form-field.is-success {
    --field-border: var(--color-success);
}