/* ==========================================================================
   theme.britbox.css — the BritBox brand
   --------------------------------------------------------------------------
   Same property names as theme.streamit.css, different values. Swapping the
   <link> is the whole rebrand: no component sheet mentions a colour literal.

   Values come from the supplied BritBox semantic token set (Semantic.zip →
   Value.tokens.json, collection mode "Value"), the same set the paywall
   prototype's css/theme.britbox.css is built from, so the two prototypes
   cannot drift apart. The right-hand column names the BritBox token each
   slot is taking its value from.

   Two slots need a word, because the two palettes are not shaped alike:

   PRIMARY-MUTED. Streamit's primary is a saturated yellow with a pale tint
   (#fff3c2) sitting under the avatar, so the avatar reads quieter than a
   button. BritBox's primary is ALREADY the pale value and the set has no
   lighter tint of it — its "primary-muted" (#28CFFB) is more saturated, not
   less, so using it would make the avatar shout. The slot therefore
   collapses onto primary: the avatar is a filled primary disc rather than a
   tinted one. Deliberate, and the only place the two brands differ in
   structure rather than in hue.

   OVERLAY. The BritBox token is #00182BCC (80%), but this slot is the glow
   behind the hero pagination and was tuned at 70% against artwork. The hue
   is taken from the token and the alpha kept, rather than swapping both and
   quietly changing how legible the dots are.
   ========================================================================== */

:root {
  /* ---- Colour ---------------------------------------------------------- */
  --color-background:         #00182B;  /* color/background                 */
  --color-background-0:       rgba(0, 24, 43, 0);    /* background @ 0%     */
  --color-surface:            #042C39;  /* color/surface-container          */
  --color-surface-container:  #00182B;  /* color/on-primary — avatar glyph  */
  --color-surface-variant:    #4A5455;  /* color/surface-variant            */
  --color-on-surface:         #F8F4EB;  /* color/on-surface                 */
  --color-on-surface-variant: #AAA8A1;  /* color/on-surface-variant         */
  --color-outline:            #AAA8A1;  /* color/outline                    */

  --color-primary:            #A6E2F5;  /* color/primary                    */
  --color-primary-muted:      #A6E2F5;  /* color/primary — see header       */
  --color-primary-20:         rgba(166, 226, 245, 0.2);
  --color-primary-30:         rgba(166, 226, 245, 0.3);
  /* The focus / hover ring. Primary at 70% — the one accent value the
     component sheets reach for by name rather than deriving. */
  --accent-ring-hover:        rgba(166, 226, 245, 0.7);

  --color-on-primary:         #00182B;  /* color/on-primary                 */

  --color-overlay:            rgba(0, 24, 43, 0.7);  /* background — see hdr */
  --color-overlay-variant:    rgba(0, 24, 43, 0.3);
  --color-scrim:              rgba(0, 24, 43, 0.5);

  --color-white-80:           rgba(255, 255, 255, 0.8);
  --color-white-20:           rgba(255, 255, 255, 0.2);
  --color-white-5:            rgba(255, 255, 255, 0.05);

  /* ---- Wordmark --------------------------------------------------------
     "BRITBOX" is a character shorter than "STREAMIT", so where the longer
     word has to be pulled in to fit the 120px slot this one has to be
     pushed out — negative tracking there, positive here, same slot and the
     same 18px cap height.

     Solved in the browser against the rendered Inter 800 by bisecting on
     the measured ink box, not by eye. It lands on 120.0px. Streamit's
     shipped -1.257px measures 118.7px by the same method; it is left
     exactly as it is, because that value is part of the verified original
     and 1.3px is not worth re-opening it over.                             */
  /* ---- Browse by Genre ------------------------------------------------
     square: the tiles are drawn 1:1 with their labels in the art. See .card-poster--genre in components.css.                       */
  --card-genre-height: var(--card-vertical-width);

  --wordmark-size:     24.41px;
  --wordmark-tracking: 1.703px;
}