/* cash-b — tokens de marca compartilhados entre todas as páginas.
   Ver identidade completa no manual de marca (brand book). */

@font-face {
    font-family: "Familjen";
    src: url("../fonts/familjen-grotesk.449245976afc.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "JB Mono";
    src: url("../fonts/jetbrains-mono.d6dbac3c14dd.woff2") format("woff2");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --ink: #12211a;
    --ink-soft: #3c4a41;
    --muted: #667069;
    --brand: #1b5e44;
    --brand-strong: #123e2d;
    --highlight: #d8ff5e;
    --highlight-ink: #12211a;
    --paper: #f6f7f1;
    --paper-2: #eef1e8;
    --line: #cdd6c5;
    --line-soft: #e2e6dc;
    --danger: #b23b3b;
    --danger-bg: #fdecea;
    --info: #1a6fb0;
    --info-bg: #e8f2fa;
    --success: #1b5e44;
    --success-bg: #e3f3ea;
}

body {
    font-family: "Familjen", "Helvetica Neue", Arial, sans-serif;
}

.mono {
    font-family: "JB Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-variant-numeric: tabular-nums;
}

/* wordmark — sempre em minúsculo, nunca com ícone */
.marca {
    font-family: "Familjen", "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
}

/* ilustrações de marca — formas planas, sem foto, usadas nos painéis gráficos */
.grafico-blob { fill: var(--highlight); opacity: 0.16; }
.grafico-anel { fill: none; stroke: var(--highlight); stroke-width: 10; stroke-linecap: round; }
.grafico-moeda { fill: var(--paper); }
.grafico-cifrao {
    fill: var(--brand-strong);
    font-family: "Familjen", "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
}
.grafico-sacola { fill: var(--paper); }
.grafico-alca { fill: none; stroke: var(--brand-strong); stroke-width: 10; stroke-linecap: round; }
.grafico-selo { fill: var(--highlight); }
.grafico-selo-texto {
    fill: var(--brand-strong);
    font-family: "Familjen", "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
}

/* destaque estilo marca-texto — usar no máximo uma vez por página */
.mark {
    position: relative;
    z-index: 0;
    display: inline-block;
    white-space: nowrap;
    padding: 0 0.08em;
    color: var(--highlight-ink);
}
.mark::before {
    content: "";
    position: absolute;
    left: -0.08em;
    right: -0.08em;
    top: 0.1em;
    bottom: 0.02em;
    background: var(--highlight);
    z-index: -1;
}

/* banner de instalação do PWA (Android: botão real; iOS: instrução) */
.pwa-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 50;
    background: var(--ink);
    color: var(--paper);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    font-size: 14px;
    max-width: 480px;
    margin: 0 auto;
}
.pwa-banner[hidden] { display: none; }
.pwa-banner-texto { flex: 1; line-height: 1.4; }
.pwa-banner-texto strong { color: var(--paper); }
.pwa-banner-acao {
    background: var(--brand);
    color: var(--paper);
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.pwa-banner-acao:hover { background: var(--brand-strong); }
.pwa-banner-fechar {
    background: none;
    border: none;
    color: var(--paper);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
    opacity: 0.7;
    flex-shrink: 0;
}
.pwa-banner-fechar:hover { opacity: 1; }