/* ==========================================================================
   theme.streamit.css — the whitelabel brand
   --------------------------------------------------------------------------
   Every colour the page uses, plus the two measurements that make the
   wordmark fit its 120px slot. Transcribed from the Figma variable
   collection on node 30083:620040 (file VTwXbZhC5eXcRZcW0J4fwF); nothing
   here is invented.

   theme.britbox.css declares exactly the same property names. That is the
   whole contract: structure lives in tokens.css and the component sheets,
   which never mention a colour literal, so swapping this one <link>
   rebrands the page and nothing else moves.
   ========================================================================== */

:root {
  /* ---- Colour ---------------------------------------------------------- */
  --color-background:         #121212;  /* page ground                      */
  --color-background-0:       rgba(18, 18, 18, 0);   /* background @ 0%     */
  --color-surface:            #282828;  /* raised card / icon-button ground */
  --color-surface-container:  #1a1a1a;  /* avatar glyph colour              */
  --color-surface-variant:    #646464;  /* progress-bar track               */
  --color-on-surface:         #ebebeb;  /* primary text                     */
  --color-on-surface-variant: #989898;  /* secondary / subtitle text        */
  --color-outline:            #8a8a8a;  /* hairline rules (footer top)      */

  --color-primary:            #ffcc00;  /* brand yellow                     */
  --color-primary-muted:      #fff3c2;  /* avatar ground                    */
  --color-primary-20:         rgba(255, 204, 0, 0.2);  /* primary @ 20%     */
  --color-primary-30:         rgba(255, 204, 0, 0.3);  /* primary @ 30%     */
  /* 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(255, 204, 0, 0.7);

  --color-on-primary:         #121212;  /* text on brand yellow             */

  --color-overlay:            rgba(6, 9, 45, 0.7);     /* hero dot-bar glow */
  --color-overlay-variant:    rgba(18, 18, 18, 0.3);   /* rail-4 hero scrim */
  --color-scrim:              rgba(18, 18, 18, 0.5);   /* rail edge fade    */

  --color-white-80:           rgba(255, 255, 255, 0.8);  /* hero meta text  */
  --color-white-20:           rgba(255, 255, 255, 0.2);  /* card hairline   */
  --color-white-5:            rgba(255, 255, 255, 0.05);

  /* ---- Wordmark --------------------------------------------------------
     The slot is 120px wide and the cap height has to land on 18px. Both
     brands hit that, but not with the same numbers — "STREAMIT" is eight
     characters and "BRITBOX" is seven, so the tracking that squeezes one
     into 120px would leave the other short. Measured, not guessed: see
     source.md §31.2.                                                       */
  /* ---- Browse by Genre ------------------------------------------------
     2:3, like every other card — the art is cropped to it. See .card-poster--genre in components.css.                       */
  --card-genre-height: var(--card-vertical-height);

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