WPForms Theme With SCSS Variables

$accent: #ea580c;
$radius: 10px;
$border: #d6d3d1;
$error: #dc2626;
$gap: 1.2rem;

.wpforms-container {
    .wpforms-field {
        padding: 0 0 $gap;

        input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
        select,
        textarea {
            width: 100%;
            max-width: 100%;
            padding: 0.75em 1em;
            border: 1px solid $border;
            border-radius: $radius;
            font-size: max(16px, 1em);
            transition: border-color 0.15s, box-shadow 0.15s;

            &:focus {
                outline: none;
                border-color: $accent;
                box-shadow: 0 0 0 3px rgba($accent, 0.2);
            }

            &.wpforms-error {
                border-color: $error;
            }
        }

        input[type="checkbox"],
        input[type="radio"] {
            accent-color: $accent;
        }
    }

    .wpforms-submit {
        padding: 0.8em 1.8em;
        border: 0;
        border-radius: $radius;
        background: $accent;
        color: #fff;
        font-weight: 600;
        cursor: pointer;

        &:hover {
            background: darken($accent, 8%);
        }
    }

    label.wpforms-error {
        color: $error;
    }

    @media (prefers-color-scheme: dark) {
        .wpforms-field input:not([type="checkbox"]):not([type="radio"]),
        .wpforms-field select,
        .wpforms-field textarea {
            background: #1c1917;
            color: #f5f5f4;
            border-color: #44403c;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .wpforms-field input,
        .wpforms-field select,
        .wpforms-field textarea {
            transition: none;
        }
    }
}