/* ============================================================================
 * Ordolio Surfaces — premium hero / first-contact background utilities.
 * Ported from mobile/pwa/src/styles/theme.css for token parity.
 *
 * .bg-brand-surface  — soft brand-tinted radial spotlight layered over a
 *                      subtle dot grid. Used for login, marketing heroes,
 *                      empty states, and any "wow" first-contact surface.
 *                      Pair with a card on top for full Stripe-style depth.
 *
 * .bg-dot-grid       — just the dot grid. Used on smaller hero fragments
 *                      where the spotlight would be too heavy.
 *
 * Both react automatically to per-org primary overrides (the spotlight)
 * and to the neutral scale (the dots), so club theming carries through.
 * ========================================================================== */

.bg-dot-grid {
    background-color: var(--ordolio-bg-canvas);
    background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ordolio-neutral-700) 22%, transparent) 1px, transparent 0);
    background-size: 24px 24px;
}

.bg-brand-surface {
    background-color: var(--ordolio-bg-canvas);
    background-image:
        radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--ordolio-default-primary) 14%, transparent) 0%, transparent 70%),
        radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ordolio-neutral-700) 22%, transparent) 1px, transparent 0);
    background-size:
        100% 100%,
        24px 24px;
    background-repeat: no-repeat, repeat;
}