/* Blockade Brigade web theme: fonts and tokens shared by the Field Guide, the asset viewer
   and the style tile. Master copy: tools/web_export/fonts/brigade.css (game project); each
   page gets a copy in its css/ folder with the woff2 files in css/fonts/. Storefront twin:
   the Hyvä theme's tailwind-source.css. Guide: docs/website-theme.md. */

@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/chakra-petch-600.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/chakra-petch-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-400.woff2") format("woff2"); }

:root {
    --bb-bg: #0e1424;
    --bb-panel: #161f36;
    --bb-panel-2: #1d2844;
    --bb-line: #2a3756;
    --bb-text: #e8ecf5;
    --bb-muted: #9aa6c0;
    --bb-amber: #f59e0b;      /* primary */
    --bb-amber-hi: #fbbf24;
    --bb-gold: #d9a33a;       /* secondary trim */
    --bb-blue: #38bdf8;       /* info, links, focus */
    --bb-red: #ff3b2f;        /* danger, boss */
    --bb-green: #4ade80;      /* success */
    --bb-cream: #f3efe6;      /* light long-form surfaces, navy text on it */

    --font-display: "Chakra Petch", "IBM Plex Sans", system-ui, sans-serif;
    --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

    /* Plate button: 2px darker bevel along the bottom, faint lit top edge */
    --bb-bevel: inset 0 -2px 0 rgb(0 0 0 / .32), inset 0 1px 0 rgb(255 255 255 / .18);
    /* Card: armour-plate inner highlight (pair with a 1px var(--bb-line) border) */
    --bb-plate: inset 0 1px 0 rgb(255 255 255 / .06);
    /* Rivet bullet: a small lit amber circle */
    --bb-rivet: radial-gradient(circle at 35% 35%, var(--bb-amber-hi), var(--bb-amber) 55%, #a16207);
    /* Header hex pattern, 5% white lines */
    --bb-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41.57' height='72' viewBox='0 0 41.57 72'%3E%3Cpath d='M20.78 0L41.57 12V36L20.78 48L0 36V12ZM20.78 48V72' fill='none' stroke='%23fff' stroke-opacity='.05'/%3E%3C/svg%3E");
    /* Hazard stripes: one underline per page, on the section title */
    --bb-hazard: repeating-linear-gradient(-45deg, var(--bb-amber) 0 8px, var(--bb-bg) 8px 16px);
}

:focus-visible { outline: 2px solid var(--bb-blue); outline-offset: 2px; }

.bb-rivets { list-style: none; padding-left: 20px; }
.bb-rivets > li { position: relative; }
.bb-rivets > li::before {
    content: ""; position: absolute; left: -15px; top: .62em;
    width: 7px; height: 7px; border-radius: 50%; background: var(--bb-rivet);
}
.bb-hazard::after {
    content: ""; display: block; width: 72px; height: 6px; margin-top: 8px;
    background: var(--bb-hazard); border-radius: 1px;
}