@layer forms {
    input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
    textarea,
    select {
        width: 100%;
        padding: var(--pad-sm) var(--pad-md);
        border: var(--border-thickness-base) solid var(--color-border);
        border-radius: var(--radius-sm);

        background-color: var(--color-background-app);
        font-size: var(--font-size-base);
        line-height: var(--line-height-tight);
        vertical-align: middle;

        box-shadow: none;
        transition: border-color 0.2s ease;
    }

    input::placeholder,
    textarea::placeholder {
        color: var(--color-foreground-secondary);
        opacity: 1; /* Firefox default is lower, this ensures consistency */
    }

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

    input:disabled,
    textarea:disabled,
    select:disabled {
        background-color: var(--color-state-disabled);
        color: var(--color-foreground-secondary);
        opacity: 0.8;
        cursor: not-allowed;
    }
}