/* ============================================
   2º BPCHQ — DESIGN TOKENS (identidade tática v3)
   Grafite + âmbar. Vermelho/azul só como giroflex e estados.
   Mesma base do SGO (site principal); copie de lá quando mudar.
   ============================================ */

:root {
    /* superfícies */
    --bg: #0b0c0d;
    --bg-2: #101113;
    --panel: #141618;
    --panel-2: #1a1d20;
    --line: #2a2d31;
    --line-2: #3a3e44;

    /* texto */
    --ink: #e7e3da;
    --ink-2: #b9b5ac;
    --muted: #84878c;
    --faint: #5a5d62;

    /* destaque */
    --amber: #f2a900;
    --amber-2: #ffc23d;
    --amber-dim: rgba(242, 169, 0, .14);
    --amber-glow: rgba(242, 169, 0, .38);

    /* giroflex / estados */
    --red: #e5322d;
    --red-glow: rgba(229, 50, 45, .55);
    --blue: #2f6bff;
    --blue-glow: rgba(47, 107, 255, .55);
    --ok: #4cc26a;

    /* tipografia */
    --f-stencil: "Saira Stencil One", "Impact", "Arial Narrow Bold", sans-serif;
    --f-cond: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
    --f-body: "Barlow", "Segoe UI", system-ui, sans-serif;
    --f-mono: "JetBrains Mono", "Consolas", "Courier New", monospace;

    /* forma e movimento */
    --r: 2px;
    --r-2: 4px;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);

    /* faixa zebrada âmbar/preto */
    --hazard: repeating-linear-gradient(-45deg, var(--amber) 0 10px, #111 10px 20px);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

::selection {
    background: var(--amber);
    color: #111;
}