@layer components {
    .contact {
        max-width: 32rem;
        margin-inline: auto;
        padding-block: var(--space-2xl) var(--space-2xl);
        padding-inline: var(--space-s);

        & .contact__form {
            display: flex;
            flex-direction: column;
            gap: var(--space-s);
            margin-block-start: var(--space-l);
            background: var(--color-surface-raised);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-l);
            padding: var(--space-l);
            box-shadow: var(--shadow-m);

            & > div {
                display: flex;
                flex-direction: column;
                gap: var(--space-2xs, 0.25rem);
            }

            & label {
                color: var(--color-text);
                font-weight: 600;
                font-size: 0.9rem;
            }

            & input,
            & textarea {
                padding: 0.75em var(--space-s);
                border: 1px solid var(--color-border);
                border-radius: var(--radius-m);
                background: var(--color-surface);
                color: var(--color-text);
                font: inherit;
                transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);

                &:focus {
                    outline: none;
                    border-color: var(--color-accent);
                    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
                }
            }

            & textarea {
                min-height: 6rem;
                resize: vertical;
            }

            & button[type="submit"] {
                margin-block-start: var(--space-2xs);
            }
        }

        & .contact__flash {
            color: var(--color-accent-strong);
            font-weight: 600;
            background: var(--gradient-brand-soft);
            border-radius: var(--radius-m);
            padding: var(--space-s);
            text-align: center;
            margin-block-start: var(--space-m);
        }
    }
}