/* Variables de color reutilizables entre paginas/formularios (empezó con "Herramientas",
   ToolsPage.razor, pero está pensado para que otros formularios añadan aquí sus propias
   variables en vez de repetir colores sueltos en cada uno).
   Provisional: usa tonos azules (primary/secondary de tailwind.config.js) porque el diseño
   de referencia venia en verde y no encajaba con el resto de la aplicacion. Cuando la
   aplicacion defina su paleta de marca definitiva, ajustar solo estas variables. */
:root {
    /* Cabecera de página compartida (PVPageHeader.razor): icono en caja de color + título +
       subtítulo corto en mayúsculas. Pensada para reutilizarse en cualquier página. */
    --page-header-bg: #FFFFFF;       /* base-50 */
    --page-header-icon-bg: #0D0149;  /* secondary (DEFAULT) */
    --page-header-icon-fg: #FFFFFF;
    --page-title-color: #262526;     /* base-900 */
    --page-subtitle-color: #3E7FFF;  /* primary-dark */
    --page-divider: #E9EAED;         /* base-200 */

    /* Herramientas (ToolsPage.razor) */
    --tools-body-bg: #E0E1E4;        /* base-300 (más contraste que base-100 en algunos monitores) */
    --tools-card-bg: #FFFFFF;        /* base-50 */
    --tools-desc-color: #8D8E90;     /* base-600 */
    --tools-card-icon-bg: #E0EAFF;   /* primary-lighter */
    --tools-card-icon-fg: #3E7FFF;   /* primary-dark */
    --tools-section-label: #8D8E90; /* base-600 */
    --tools-section-count: #AFAFB0; /* base-500 */

    /* UbiTokens (UbiTokensPage.razor): variante de icono "en curso/reservado" (warning de
       tailwind.config.js, oscurecido para dar contraste de icono sobre fondo claro). */
    --ubitokens-icon-warning-bg: #FFECC6; /* warning-lighter */
    --ubitokens-icon-warning-fg: #B87313; /* warning-dark oscurecido */

    /* UbiTokens: badge de tipo de movimiento e importes con signo en el Historial. */
    --ubitokens-badge-green-bg: #BEF4E1; /* success-lighter */
    --ubitokens-badge-green-fg: #2AC08A; /* success-dark */
    --ubitokens-amount-negative: #F83D15; /* danger-dark */
}