Fluent Forms Theme With SCSS Variables

$accent: #059669;
$radius: 10px;
$border: #d1d5db;
$error: #dc2626;
$gap: 1.2rem;

.fluentform {
    .ff-el-group {
        margin-bottom: $gap;
    }

    .ff-el-form-control {
        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);
        }
    }

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

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

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

    .ff-el-is-error .ff-el-form-control {
        border-color: $error;
    }

    .text-danger {
        color: $error;
    }

    @media (prefers-color-scheme: dark) {
        .ff-el-form-control {
            background: #111827;
            color: #f9fafb;
            border-color: #374151;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .ff-el-form-control {
            transition: none;
        }
    }
}