/* ============================================================================
   COMMAND CENTER — BRAND TOKENS.

   This file holds every value that is specific to the *brand* the app is
   dressed in: the accent color and its derivatives, the near-black chrome, and
   the four font-family roles. Nothing else belongs here.

   Everything brand-neutral — spacing, radii, the type scale, status/state
   colors, neutrals — lives in cc-tokens.css. Keeping the two apart means a
   rebranded fork of this codebase touches exactly this file (plus
   Theme/BrandConstants.cs, its C#/JS counterpart) and can merge upstream
   changes to the rest of the design system without conflict.

   Loaded immediately before cc-tokens.css in Components/App.razor. Order is not
   load-bearing — CSS custom properties resolve lazily at use time, so
   cc-tokens.css can reference these tokens regardless of which file lands
   first — but keeping brand first makes the layering obvious.

   The C#/JS side of these same values is Theme/BrandConstants.cs. When you
   change a color here, change it there too.
   ============================================================================ */
:root {
    /* ---- accent ------------------------------------------------------------
       --cc-red is the lead brand color: buttons, active rails, focus rings,
       selected states, chips, the header underline. The name is historical —
       treat it as "brand accent", not literally red.

       --cc-brand-text is the accent as used for TEXT on white/light surfaces.
       It is a separate token from --cc-red because the two have different jobs:
       a fill only has to look right, whereas text has to stay legible. WCAG AA
       wants 4.5:1 against white for normal-size text, and an accent chosen for
       impact often does not clear that on its own — #F3002B is 4.37:1, already
       marginally short.

       It resolves to the accent itself today, so nothing renders differently.
       Its reason for existing is that a rebrand can darken *just the text* uses
       without dulling every button and rail. Anything appreciably lighter than
       the current red will need to.

       --cc-red-rgb is the same accent as bare "r, g, b" components, for the
       rgba() tints used throughout the app. CSS cannot decompose a hex custom
       property, so the two representations have to be maintained together —
       change one, change the other.
       ---------------------------------------------------------------------- */
    --cc-red: #F3002B;
    --cc-red-rgb: 243, 0, 43;
    --cc-red-hover: #D10025;
    --cc-brand-text: var(--cc-red);

    /* Accent washed almost to white — row hovers and panel backgrounds. Not
       expressible as rgba(var(--cc-red-rgb), α): the hand-picked value is a
       whole point off any exact alpha blend, so it gets its own token.
       Mirrors BrandConstants.AccentWash. */
    --cc-red-wash: #ffebee;

    /* ---- chrome ---- */
    --cc-black: #000;
    --cc-header-bg: #1a1a1a;

    /* ---- typography roles --------------------------------------------------
       Four roles, not seven families. @font-face declarations live in
       wwwroot/fonts/brand-fonts.css; these tokens name the families and are
       consumed by app.css (--amr-font-*), analytics-theme.css (--rcm-font-*),
       and cc-chrome.css. MudBlazor's Typography needs literal family names
       rather than var(), so it reads the same values from BrandConstants.
       ---------------------------------------------------------------------- */
    --cc-font-body: Dinot, Inter, system-ui, -apple-system, sans-serif;
    --cc-font-heading: DinotBold, sans-serif;
    --cc-font-display: Klavika, DinotBold, sans-serif;
    --cc-font-medium: DinotMedium, sans-serif;
}