/* Nexdigital Forms - default styling for JS-inserted messages.
 *
 * These used to be inline styles on the elements themselves, which no theme
 * could override: an inline declaration beats any selector. They live here so
 * a theme can restyle a message to match its own surface - the rules are
 * wrapped in :where() to carry zero specificity, so a plain `.nxd-success {}`
 * in the theme wins without needing !important.
 *
 * The custom properties are the smaller lever: set them to recolour a message
 * while keeping this layout.
 */

:where(.nxd-success) {
    padding: var(--nxd-success-padding, 1rem 1.25rem);
    background: var(--nxd-success-bg, #f0fdf4);
    border: 1px solid var(--nxd-success-border, #bbf7d0);
    border-radius: var(--nxd-success-radius, 0.75rem);
    color: var(--nxd-success-color, #166534);
    font-size: var(--nxd-success-font-size, 0.9375rem);
    line-height: 1.6;
}

/* #dc2626 only reaches 3.1:1 on a dark surface, below the WCAG AA floor, so
   themes on dark backgrounds are expected to override --nxd-error-color. */
:where(.nxd-field-error) {
    display: block;
    margin-top: 4px;
    color: var(--nxd-error-color, #dc2626);
    font-size: var(--nxd-error-font-size, 0.8125rem);
}