/*
 * Martello Reconnect Modal Theme
 *
 * Customer-friendly styling with Martello brand colors
 * and a warm, reassuring user experience.
 *
 * Usage in App.razor or _Host.cshtml:
 *   <link href="_content/MI.Api.Common/css/reconnect-themes/martello.css" rel="stylesheet" />
 *   <MI.Api.Common.Components.ReconnectModal AnimationImageUrl="/img/piggy-bank-mascot.png" />
 */

:root {
    /* Backdrop - softer for less alarm */
    --mi-reconnect-backdrop-color: rgba(23, 37, 84, 0.3); /* blue-950 with transparency */
    --mi-reconnect-backdrop-blur: 8px;

    /* Box - Martello branded */
    --mi-reconnect-box-bg: #f8fafc; /* slate-50 */
    --mi-reconnect-box-radius: 1rem;
    --mi-reconnect-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    --mi-reconnect-box-padding: 2.5rem;
    --mi-reconnect-box-max-width: 28rem;
    --mi-reconnect-font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Animation - larger for mascot */
    --mi-reconnect-animation-height: 140px;
    --mi-reconnect-animation-margin-bottom: 1rem;
    --mi-reconnect-mascot-size: 128px;

    /* Text - warmer, friendlier */
    --mi-reconnect-text-color: #1e3a5f; /* dark navy */
    --mi-reconnect-text-size: 1.0625rem;
    --mi-reconnect-text-line-height: 1.6;
    --mi-reconnect-text-margin-bottom: 1.75rem;
    --mi-reconnect-countdown-color: #172554; /* blue-950 */
    --mi-reconnect-countdown-weight: 700;

    /* Buttons - Martello blue theme */
    --mi-reconnect-button-padding: 0.875rem 2rem;
    --mi-reconnect-button-font-size: 1rem;
    --mi-reconnect-button-font-weight: 600;
    --mi-reconnect-button-radius: 0.5rem;
    --mi-reconnect-button-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --mi-reconnect-retry-bg: #172554; /* blue-950 */
    --mi-reconnect-retry-hover: #1e3a8a; /* blue-900 */
    --mi-reconnect-reload-bg: #172554; /* blue-950 */
    --mi-reconnect-reload-hover: #1e3a8a; /* blue-900 */

    /* Dark mode - adjust for Martello branding */
    --mi-reconnect-dark-box-bg: #1e293b; /* slate-800 */
    --mi-reconnect-dark-text-color: #f1f5f9; /* slate-100 */
}

/* Mobile-friendly sizing */
@media (max-width: 480px) {
    :root {
        --mi-reconnect-box-padding: 1.75rem;
        --mi-reconnect-box-max-width: 90vw;
        --mi-reconnect-mascot-size: 96px;
        --mi-reconnect-animation-height: 110px;
    }
}