/* ==========================================================================
   Peripheral brand foundation — fonts and colour tokens.

   ONE source of truth for the brand primitives. Every page that renders
   Peripheral chrome links this file BEFORE its own stylesheet:

       <link rel="stylesheet" href="./brand.css">

   Rollup copies it to dist/brand.css (see rollup.config.js copyAndWatch
   targets) next to home.css, so the relative url()s below resolve against
   dist/ — NOT against each page's <base href>. Keep the font files under
   static/brand/fonts/ for that reason.

   Consumers map their own local variables onto these tokens rather than
   restating hex literals — admin.html's :root block is the worked example.
   Adding a fifth brand colour here should be the whole change; if you find
   yourself pasting #FF6300 into a component, add a token instead.

   The fonts and logos this file references live in static/brand/ and are
   committed to the repo — nothing here reads from outside it. See
   docs/brand-assets.md for where they came from and how to regenerate them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Body — Chakra Petch (SIL Open Font License 1.1).
   Four upright weights; the italics in the brand kit are not shipped because
   nothing in the UI asks for them. Add them here if that changes rather than
   letting the browser synthesise an oblique.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Chakra Petch';
    src: url('./static/brand/fonts/ChakraPetch-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Chakra Petch';
    src: url('./static/brand/fonts/ChakraPetch-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Chakra Petch';
    src: url('./static/brand/fonts/ChakraPetch-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Chakra Petch';
    src: url('./static/brand/fonts/ChakraPetch-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   Display + subhead faces.

   Both ship as a SINGLE bold cut. The `font-weight: 400 900` range is
   deliberate: it maps every requested weight onto the one real file, so a
   heading that inherits `font-weight: 600` renders the actual font instead of
   a browser-synthesised faux-bold of it. Do not "fix" these to 700 — that is
   what reintroduces the synthesis.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Microgramma';
    src: url('./static/brand/fonts/MicrogrammaD-BoldExtended.woff2') format('woff2');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Trade Gothic';
    src: url('./static/brand/fonts/TradeGothic-Bold.woff2') format('woff2');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ---- Brand colours (PERIPHERAL_BRANDCOLOURS_REFERENCEGUIDE) ---------- */
    --brand-carbon: #080808;
    --brand-pulse-red: #ff202d;
    --brand-velocity-orange: #ff6300;
    --brand-canvas-cloud: #edf1f5;

    /* Interaction states derived from the two accents. Not in the brand
       sheet — screen UI needs hover/active steps the print guide has no
       opinion about. Kept here so they stay consistent across products. */
    --brand-orange-hover: #ff7a26;
    --brand-orange-active: #e05600;
    --brand-red-hover: #ff4753;
    --brand-red-active: #d91826;

    /* Low-alpha washes for selected rows, focus halos and chip backgrounds. */
    --brand-orange-wash: rgba(255, 99, 0, 0.14);
    --brand-red-wash: rgba(255, 32, 45, 0.14);

    /* ---- Type ------------------------------------------------------------
       Roles, not file names. Display is the wide Microgramma cut — brand
       lockups and page titles only; it gets illegible fast in dense tables.
       Subhead (Trade Gothic) is for section labels and table headers. Body
       (Chakra Petch) carries everything else. */
    --brand-font-display: 'Microgramma', 'Helvetica Neue', Arial, sans-serif;
    --brand-font-subhead: 'Trade Gothic', 'Helvetica Neue', Arial, sans-serif;
    --brand-font-body: 'Chakra Petch', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Roboto, system-ui, sans-serif;
    --brand-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
}

/* --------------------------------------------------------------------------
   Shared brand lockup helper.

   The wordmark+monogram SVG has a tight viewBox (its artwork bounding box),
   so one dimension sizes it predictably — set a height and the width follows.

   Sizing it next to text: only ~52% of the lockup's height is the wordmark's
   ascender band, because the monogram beside the word is taller than the word.
   So matching the lockup's height to the neighbouring font-size renders
   "peripheral" noticeably SMALLER than that text. Rule of thumb: lockup height
   ≈ 1.45 × the adjacent label's font-size to sit level with its cap height,
   and a little above that to read as the senior element. 22px against a 15px
   label is the worked example (see AdminApp.tsx).

   ALIGNING it next to text — the other half of the same problem. The wordmark's
   baseline sits at

       (335.2 − 221.26) / 194.44  =  0.586

   of the lockup's height, measured down from the top of its box (those are
   viewBox units: art box origin, art box height, and the y of the bottom of
   "e"/"r"/"a"). The monogram fills the remaining 41% BELOW that baseline.

   Consequence: `align-items: center` cannot align a lockup with text beside it.
   It centres boxes, and the lockup's box is the whole mark while the text's is
   a line box — so their baselines land ~4px apart at the sizes above and the
   wordmark floats visibly high. The fix is to nudge the LOCKUP down (never the
   label, which would then break alignment with any nav beside it) by

       delta = textBaseline − (lockupTop + 0.586 × lockupHeight)

   Both admin and the scene browser use a 22px lockup against a 15px Trade
   Gothic label, where that works out to 4px. Re-derive if either size changes.
   -------------------------------------------------------------------------- */
.brand-lockup {
    height: 22px;
    width: auto;
    display: block;
    flex-shrink: 0;
}