/* ============================================================
   Bolso+ — Design Tokens
   Paleta, raios, sombras e tipografia oficiais do app.
   Reaproveitável em Blazor (web) e portável para Flutter (mobile).
   ============================================================ */
:root {
    /* ---- Cores da marca ---- */
    --bolso-roxo-escuro: #17104A; /* roxo escuro principal  */
    --bolso-roxo-vibrante: #6D35FF; /* roxo vibrante (CTA)     */
    --bolso-roxo-medio: #7B3DFF; /* roxo médio             */
    --bolso-azul: #2176FF; /* azul                   */
    --bolso-verde: #2ECC71; /* verde (receita)        */
    --bolso-vermelho: #FF3B4F; /* vermelho (despesa)     */
    --bolso-laranja: #FF9F1C; /* laranja (destaque)     */

    /* ---- Texto e superfícies ---- */
    --bolso-texto: #15152E; /* texto principal        */
    --bolso-texto-2: #7A7A93; /* texto secundário       */
    --bolso-fundo: #F8F7FF; /* fundo da tela          */
    --bolso-card: #FFFFFF; /* card branco            */
    --bolso-linha: #ECEAF5; /* linha / divisor        */

    /* ---- Tints suaves (badges de ícone) ---- */
    --bolso-verde-tint: #E7F8EE;
    --bolso-vermelho-tint: #FFE9EC;
    --bolso-roxo-tint: #EFEAFF;
    --bolso-azul-tint: #E7F0FF;
    --bolso-laranja-tint: #FFF2DE;

    /* ---- Cinzas/lilás auxiliares ---- */
    --bolso-fundo-externo: #EDEBF7; /* cinza-lilás ao redor do "celular" */
    --bolso-trilho: #F0EEF8; /* trilho do donut/progresso         */
    --bolso-placeholder: #B6B2C9; /* texto de placeholder             */
    --bolso-chevron: #C7C3DA; /* chevrons / ícones discretos      */
    --bolso-olho: #C9C3F0; /* ícone de olho no card de saldo   */

    /* ---- Texto sobre o card escuro de saldo ---- */
    --bolso-saldo-texto-2: #A9A4D6;
    --bolso-saldo-despesa: #FF6171; /* coral mais claro p/ legibilidade no fundo escuro */
    --bolso-saldo-divisor: rgba(255, 255, 255, .10);
    --bolso-saldo-grad: linear-gradient(135deg, #2C2068 0%, #1C1452 46%, #140E38 100%);

    /* ---- Raios ---- */
    --r-card: 24px;
    --r-card-lg: 28px;
    --r-badge: 16px;
    --r-pill: 999px;

    /* ---- Sombras suaves (sem exagero) ---- */
    --sombra-card: 0 12px 30px rgba(23, 16, 74, .06);
    --sombra-saldo: 0 22px 44px rgba(23, 16, 74, .30);
    --sombra-acao: 0 8px 18px rgba(23, 16, 74, .05);
    --sombra-nav: 0 -10px 30px rgba(23, 16, 74, .07);

    /* ---- Tipografia ---- */
    --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Display', Roboto, system-ui, sans-serif;

    /* ---- Espaçamento padrão da tela ---- */
    --pad-tela: 18px;
}