/* ============================================================
   BriefingOS — Pattern de fundo "Campo de Marcadores" (C3)
   Puro CSS, sem JS. Dois SVG data-URI sobrepostos:
   marcadores neutros (grade 44px) + dourados esparsos (tile 220px).
   ------------------------------------------------------------
   USO:
     <div class="bo-bg-markers bo-bg-fade"> ... </div>   (fundo ESCURO/ink)
     <div class="bo-bg-markers bo-bg-markers--light bo-bg-fade"> ... </div>  (fundo CLARO/cream)
   Aplique em: hero de login, sidebar, estados vazios, telas de sucesso, splash.
   NÃO use atrás de tabelas, listas densas ou formulários ativos.
   ============================================================ */

:root{
  /* marcadores neutros — calibrados p/ fundo ink-900 (#1a1814) */
  --bo-marker-neutral: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect x='6' y='6' width='4' height='4' fill='%233a352d'/%3E%3C/svg%3E");
  /* marcadores dourados esparsos (gold-500 #b8933a) */
  --bo-marker-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Crect x='94' y='6' width='4' height='4' fill='%23b8933a'/%3E%3Crect x='6' y='94' width='4' height='4' fill='%23b8933a'/%3E%3Crect x='182' y='138' width='4' height='4' fill='%23b8933a'/%3E%3Crect x='138' y='182' width='4' height='4' fill='%23b8933a'/%3E%3C/svg%3E");
}

/* pattern base */
.bo-bg-markers{
  background-image: var(--bo-marker-gold), var(--bo-marker-neutral);
  background-repeat: repeat, repeat;
}

/* variante p/ superfícies CLARAS (cream) — marcadores neutros em cream-400 */
.bo-bg-markers--light{
  --bo-marker-neutral: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect x='6' y='6' width='4' height='4' fill='%23c1b298'/%3E%3C/svg%3E");
}

/* desvanece o pattern nas bordas — evita "parede de textura" */
.bo-bg-fade{
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 78%);
          mask-image: radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 78%);
}

/* opcional: variante de fade a partir de um canto (heroes) */
.bo-bg-fade--corner{
  -webkit-mask-image: radial-gradient(90% 90% at 85% 10%, #000 30%, transparent 75%);
          mask-image: radial-gradient(90% 90% at 85% 10%, #000 30%, transparent 75%);
}