/* ============================================================
   Vidro — o elemento-assinatura da identidade 2026.
   Regras do Design System: vidro sempre em cima de algo (foto, roxo,
   camaleão) — sobre fundo liso ele some; nunca vidro dentro de vidro.
   ============================================================ */

.glass {
    background: var(--glass-light);
    border: 1px solid var(--glass-light-border);
    border-radius: var(--radius-card);
    box-shadow: var(--glass-light-shadow);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    color: var(--ink);
}

.glass--dark {
    background: var(--glass-dark);
    border: 1.5px solid var(--glass-dark-border);
    box-shadow: var(--glass-dark-shadow);
    -webkit-backdrop-filter: var(--glass-dark-blur);
    backdrop-filter: var(--glass-dark-blur);
    color: #FFFFFF;
}

/* Sem backdrop-filter (Firefox antigo, modo de economia de alguns Android)
   o texto continuaria em cima da foto crua. Fica mais opaco no lugar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass       { background: rgba(255, 255, 255, 0.92); }
    .glass--dark { background: rgba(17, 17, 20, 0.78); }
}

/* ── Chip ────────────────────────────────────────────────── */

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 40px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.2;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(17, 17, 20, 0.06);
    color: var(--ink);
}

.glass--dark .chip {
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
    color: #FFFFFF;
}