/*!
 * BeplyTheme — Mobile design tokens (v2)
 * Beply Technologies S.L.
 *
 * Lenguaje visual: app fintech española competidora directa de Holded/Quipu
 * pero con identidad Beply propia — square borders, rojo puntual,
 * Raleway + Montserrat, mucho whitespace. Sin pills, sin redondeos, sin
 * gradientes pastel.
 */

:root {
    /* ============================================================
       Tap targets — WCAG 2.2 / Apple 44pt / Material 48dp
       ============================================================ */
    --beply-mb-tap: 44px;
    --beply-mb-tap-lg: 52px;

    /* ============================================================
       Chrome heights — bajamos vs v1 para ganar pantalla útil
       ============================================================ */
    --beply-mb-bar-h: 52px;          /* (v1: 56) appbar superior */
    --beply-mb-nav-h: 68px;          /* (v3: 54 → 68) bottom nav — más generoso y moderno */

    /* ============================================================
       Spacing — escala 4pt (más densa que 8pt para mobile fintech)
       ============================================================ */
    --beply-mb-gap-2xs: 2px;
    --beply-mb-gap-xs: 4px;
    --beply-mb-gap-sm: 6px;
    --beply-mb-gap: 8px;
    --beply-mb-gap-md: 12px;
    --beply-mb-gap-lg: 16px;
    --beply-mb-gap-xl: 24px;
    --beply-mb-gap-2xl: 32px;
    --beply-mb-pad: 16px;            /* padding canónico de pantalla */
    --beply-mb-pad-sm: 12px;         /* padding canónico de card */

    /* ============================================================
       Typography scale — refinada
       ============================================================ */
    --beply-mb-fs-2xs: 10px;
    --beply-mb-fs-xs: 11px;
    --beply-mb-fs-sm: 13px;
    --beply-mb-fs-base: 14px;
    --beply-mb-fs-input: 16px;       /* ≥16 evita zoom iOS */
    --beply-mb-fs-lg: 16px;
    --beply-mb-fs-xl: 20px;
    --beply-mb-fs-h: 24px;           /* h1 sección móvil */
    --beply-mb-fs-kpi: 26px;
    --beply-mb-fs-kpi-hero: 36px;    /* KPI principal (pendiente cobro) */

    /* ============================================================
       Font stacks — explícitas
       Beply usa Raleway para texto y Montserrat para números/divisas.
       En mobile son canónicas, sin fallbacks genéricos.
       ============================================================ */
    --beply-mb-font-text: 'BeplyFont', system-ui, -apple-system, sans-serif;
    --beply-mb-font-numbers: 'BeplyFont-Numbers', 'BeplyFont', system-ui, sans-serif;

    /* ============================================================
       Radii — Beply es brand 100% cuadrada
       ============================================================ */
    --beply-mb-radius: 0;
    --beply-mb-radius-card: 0;
    --beply-mb-radius-chip: 0;
    --beply-mb-radius-fab: 0;
    --beply-mb-radius-avatar: 50%;   /* única excepción: avatar circular */

    /* ============================================================
       Shadows — casi inexistentes (Beply es flat).
       El "shadow" de cards es un borde 1px gris fino, no un blur.
       ============================================================ */
    --beply-mb-shadow: none;
    --beply-mb-shadow-hi: 0 8px 28px rgba(0, 0, 0, 0.10);
    --beply-mb-shadow-fab: 0 8px 24px rgba(var(--bs-danger-rgb, 210, 0, 0), 0.30);

    /* ============================================================
       Borders
       ============================================================ */
    --beply-mb-border-w: 1px;
    --beply-mb-border-strong: 1.5px;

    /* ============================================================
       Color system
       ============================================================ */
    --beply-mb-bg: #fafafa;              /* (v1: #f8f9fa) un pelín más claro */
    --beply-mb-surface: #ffffff;
    --beply-mb-surface-2: #f4f5f7;
    --beply-mb-surface-3: #ebedf0;
    --beply-mb-fg: #111418;              /* casi negro, no #212529 */
    --beply-mb-fg-strong: #000000;
    --beply-mb-fg-mute: #6b7280;
    --beply-mb-fg-soft: #9aa1ad;
    --beply-mb-border: #e5e7eb;
    --beply-mb-border-soft: #f1f3f5;
    --beply-mb-primary: #000000;
    --beply-mb-on-primary: #ffffff;
    --beply-mb-accent: #d20000;
    /* Los derivados los recalcula `BrandingOverrides` con el color del tenant;
       aquí van los de la casa para cuando no hay marca blanca. */
    --beply-mb-accent-dark: #b00000;
    --beply-mb-accent-rgb: 210, 0, 0;
    --beply-mb-accent-soft: #fef0f0;     /* fondo rojo muy claro para badges */
    --beply-mb-on-accent: #ffffff;

    /* Semánticos — contraste AA y tonos suaves para fondos */
    --beply-mb-success: #0e7c34;
    --beply-mb-success-soft: #e9f6ee;
    --beply-mb-warning: #8a5a00;
    --beply-mb-warning-soft: #fdf3df;
    --beply-mb-info: #1357a6;
    --beply-mb-info-soft: #e9f1fa;
    /* SEMÁNTICOS, no de marca: un aviso es rojo y un "hecho" es verde aunque el
       tenant tenga otro color. Estos dos NO los toca `BrandingOverrides`; el
       color de la marca es `--beply-mb-accent`. */
    --beply-mb-danger: #d20000;
    --beply-mb-danger-soft: #fef0f0;

    /* ============================================================
       Safe areas (notch/home indicator iOS)
       ============================================================ */
    --beply-mb-safe-top: env(safe-area-inset-top, 0px);
    --beply-mb-safe-bottom: env(safe-area-inset-bottom, 0px);
    --beply-mb-safe-left: env(safe-area-inset-left, 0px);
    --beply-mb-safe-right: env(safe-area-inset-right, 0px);

    /* ============================================================
       Motion
       ============================================================ */
    --beply-mb-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --beply-mb-dur-fast: 120ms;
    --beply-mb-dur: 180ms;
    --beply-mb-dur-slow: 260ms;

    /* ============================================================
       Z-indexes coordinados
       ============================================================ */
    --beply-mb-z-appbar: 1030;
    --beply-mb-z-bottomnav: 1040;
    --beply-mb-z-fab: 1045;
    --beply-mb-z-sheet: 1050;
    --beply-mb-z-toast: 1080;
}

@media (max-width: 767.98px) {
    html.beply-mobile-native-webview,
    body.beply-mobile-native-webview {
        /* La APK renderiza el WebView debajo de la status bar nativa
           (overlaysWebView=false). En ese contexto env(safe-area-inset-top)
           duplica espacio frente al responsive web. */
        --beply-mb-safe-top: 0px;
    }
}

/* Beply Mobile fuerza modo claro permanente — independiente del SO.
   Si en el futuro se valida una paleta dark Beply oficial, se añadirá
   bajo un toggle explícito, no por @media prefers-color-scheme. */