/* ===========================================================================
   WFC — Warehouse Fighting Championship
   One place the brand is defined, linked by every page.

   Before this file each page carried its own hardcoded hexes, which is how
   /roblox/ ended up teal and /viewer/ ended up a slightly different teal. The
   rule from here: no page declares a brand colour, it names one.

   THE SPLIT THAT MATTERS
   The promotion is not one of the corners. Signal yellow is WFC — the mark,
   the wordmark, the rules furniture. Red and blue belong to the two fighters
   and appear nowhere the brand speaks, or the HUD stops meaning anything.

   Everything here is pulled from the building the promotion is named after:
   hazard yellow off a warehouse floor, the blue-white of the fixtures actually
   hanging in the model, and the greys of corrugated steel.
   =========================================================================== */

:root {
  /* --- ground ------------------------------------------------------------ */
  --wfc-black:   #08090C;   /* the hall, lights out */
  --wfc-pit:     #05060A;   /* scene fog and background; darkest thing there is */
  --wfc-panel:   #12151B;   /* any surface that sits on the ground */
  --wfc-raised:  #18202B;   /* hover state of the above */
  --wfc-line:    #242A33;   /* hairline borders */
  --wfc-line-lit:#39445A;   /* hairline, hovered */

  /* --- ink --------------------------------------------------------------- */
  --wfc-bone:    #E8ECF4;   /* primary text */
  --wfc-dim:     #8B96A5;   /* secondary text */
  --wfc-faint:   #6B7486;   /* labels, disabled, meta */

  /* --- the promotion ----------------------------------------------------- */
  --wfc-signal:  #F5C518;   /* hazard yellow. THE brand colour */
  --wfc-signal-d:#C79E0A;   /* pressed / underline */
  --wfc-steel:   #6B6F76;   /* corrugated wall grey */
  --wfc-tube:    #A7E5FF;   /* the fixtures' emissive, for anything "lit" */

  /* --- the corners ------------------------------------------------------- */
  /* Functional, not decorative: these two are how you tell whose bar is whose,
     so they are never used for anything that is not a fighter.

     Red and blue, because that is what the sport uses. Every commission runs a
     red corner and a blue corner — it is on the licence, it decides who walks
     first and whose name is read second, and a fighter's own glove tape is that
     colour. Green/red was a colour scheme; red/blue is the sport's own fact,
     and it costs nothing to be right about. Blue is lifted a long way toward
     cyan from the regulation navy so it survives being a 4px bar on near-black
     next to signal yellow. */
  --wfc-blue:    #2F86E8;
  --wfc-red:     #E0433C;

  /* --- type -------------------------------------------------------------- */
  /* Condensed industrial grotesque for anything that speaks as the promotion:
     it is signage, and signage is what a warehouse is full of. Bahnschrift and
     DIN Alternate are the Windows and macOS system copies of the same idea;
     Arial Narrow is the near-universal fallback. */
  --wfc-display: 'Bahnschrift', 'DIN Alternate', 'Arial Narrow',
                 ui-sans-serif, system-ui, sans-serif;
  --wfc-ui:      ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wfc-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- rhythm ------------------------------------------------------------ */
  --wfc-track-wide: .28em;  /* eyebrows and labels */
  --wfc-track-mark: .18em;  /* the wordmark */
  --wfc-radius: 2px;        /* nothing here is soft; steel has square corners */
}

/* ---------------------------------------------------------------------------
   Primitives shared across pages. Deliberately few -- this is a brand sheet,
   not a component library, and the game's HUD has its own layout needs.
--------------------------------------------------------------------------- */

/* The wordmark. Uppercase, tracked out, and SOLID.
   It used to carry a white-to-grey chrome gradient, which is what a Vegas
   pay-per-view logo does. This promotion runs out of a shed: the identity is
   spray stencil and hazard tape, and polished chrome fights it. The colour
   comes from the ground it sits on -- bone on black, black on yellow. */
.wfc-wordmark {
  font-family: var(--wfc-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--wfc-track-mark);
  text-indent: var(--wfc-track-mark);
  line-height: .96;
  color: var(--wfc-bone);
}
/* Struck through by the hazard band, the way it is stencilled on the mat. */
.wfc-wordmark--barred {
  position: relative;
  display: inline-block;
  padding-bottom: .13em;
  border-bottom: .055em solid var(--wfc-signal);
}

/* Sits under the wordmark. Never larger, never bolder. */
.wfc-sub {
  font-family: var(--wfc-display);
  text-transform: uppercase;
  letter-spacing: var(--wfc-track-wide);
  color: var(--wfc-dim);
  font-weight: 400;
}

/* Small yellow caps. The promotion's voice for anything that labels. */
.wfc-eyebrow {
  font-family: var(--wfc-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--wfc-track-wide);
  font-size: 11px;
  color: var(--wfc-signal);
}

/* The hazard rule, straight off the mark. Used where a section breaks. */
.wfc-hazard {
  height: 6px;
  border: 0;
  margin: 0;
  background: repeating-linear-gradient(
    -45deg,
    var(--wfc-signal) 0 7px,
    var(--wfc-black) 7px 14px);
  opacity: .85;
}

/* Focus is the same everywhere or it is not a system. */
:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--wfc-signal);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}