/* ==========================================================================
   tokens.css — BritBox Apollo design tokens
   --------------------------------------------------------------------------
   Source of truth: Figma variable collection on node 30083:620040
   (file VTwXbZhC5eXcRZcW0J4fwF). Values are transcribed verbatim from
   `get_variable_defs`; nothing here is invented.

   Naming mirrors the Figma variable paths 1:1 so a token can be traced back
   to the design file: `color/on-surface` -> `--color-on-surface`.
   ========================================================================== */

: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;  /* BritBox Apollo 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%     */
  --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);

  /* ---- Typography ------------------------------------------------------
     NOTE: the type sizes below come from the Figma *variable collection*.
     The inline fallbacks emitted by Figma's code export were stale (14/16/18
     instead of 16/18/20); the collection values are the ones that reproduce
     every measured section height in the frame exactly. See source.md.      */
  --type-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --type-body-xl-size: 20px;  /* rail titles, avatar glyph, rail-4 tagline  */
  --type-body-l-size:  18px;  /* hero tagline, enriched-card titles          */
  --type-body-m-size:  16px;  /* nav items, hero meta, buttons, footer links */
  --type-body-s-size:  14px;  /* rail subtitles, card meta                   */
  --type-body-xs-size: 14px;  /* card badge                                  */

  --type-weight-regular:   400;
  --type-weight-semi-bold: 600;

  --type-line-height: 1.5;    /* every text style in the frame uses 1.5      */

  /* ---- Spacing --------------------------------------------------------- */
  --space-2xs:  2px;
  --space-xs:   4px;
  --space-s:    8px;
  --space-m:   12px;
  --space-l:   16px;
  --space-xl:  20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 40px;
  --space-5xl: 64px;
  --space-huge: 116px;

  /* ---- Radius ---------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-s:    8px;
  --radius-full: 9999px;

  /* ---- Component sizes ------------------------------------------------- */
  --icon-xs: 20px;
  --icon-s:  24px;
  --icon-m:  32px;
  --icon-l:  48px;
  --icon-xl: 64px;
  --avatar-s: 40px;

  /* ---- Frame geometry (measured from the Figma frame) ------------------ */
  --frame-width:      1440px;   /* the Figma artboard; reference only      */
  --hero-height:      480px;
  --appbar-height:     88px;

  /* Fluid gutters, matching the STREAMIT web demo's shell. Each resolves to
     its Figma value at 1440px and shrinks gracefully below that, so the
     screen stays pixel-exact at the artboard width while full-bleed
     elements can run edge to edge at any viewport size. */
  --frame-gutter:  clamp(24px, 4.5vw, 64px);    /* 64px at >=1422px        */
  --menu-gap:      clamp(32px, 8.06vw, 116px);  /* 116px at 1440px         */
  --footer-gutter: clamp(24px, 8.06vw, 116px);  /* 116px at 1440px         */

  --card-vertical-width:   202px;  /* poster card                          */
  --card-vertical-height:  303px;
  /* Continue Watching. Figma draws it at 313 x 176.06; next to 303-tall
     poster cards that read as a thin strip, so it is set to two poster
     columns plus the gap (202*2 + 20 = 424) and keeps 16:9 exactly. Three
     of them plus their gaps land on the same 64px right gutter as the
     poster rails: 424*3 + 20*2 + 64 = 1376 at 1440. */
  --card-horizontal-width: 424px;
  --card-horizontal-height: 238.5px;
  --card-expanded-width:   538px;  /* in-rail hover preview (Figma 7539:165485) */
  --rail-gap: var(--space-xl);     /* 20px between cards                   */

  /* ---- Interaction ------------------------------------------------------
     Transcribed from the STREAMIT web demo
     (Apollo/stream-it-demo/Web-demos/streamit-home). The card box never
     changes size on hover — the artwork zooms inside a fixed, clipped box,
     so a rail never reflows.                                              */
  --card-outline:       var(--color-white-20);      /* white @20 — resting */
  --card-outline-hover: rgba(255, 255, 255, 0.8);   /* white @80 — hover   */
  /* The demo uses 1.148 (232/202 in Figma) over 300ms, which reads as a
     lurch on a 202px card. Softened to a gentle settle, eased out so it
     decelerates into place rather than stopping dead. */
  --card-zoom:          1.06;
  --scrim-hover:        rgba(0, 0, 0, 0.75);        /* overlay ground      */
  --accent-ring:        var(--color-primary-30);    /* yellow @30          */
  --accent-ring-hover:  rgba(255, 204, 0, 0.7);     /* yellow @70          */

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-zoom:     cubic-bezier(0.22, 0.61, 0.36, 1);   /* ease-out */
  /* Symmetric ease-in-out: the old ease-out started at full speed, which is
     what made the entrance feel jumpy. This leaves and arrives from rest.  */
  --ease-slide:    cubic-bezier(0.62, 0.02, 0.24, 1);
  --dur-zoom:    0.45s;
  --dur-slide:   1.05s;   /* hero item transition — deliberate, not hurried */
  --delay-slide: 0.12s;   /* the beat of stillness before anything moves    */

  /* The incoming artwork settles from a whisper of over-scale as its
     container opens. Kept small: the reveal itself carries the motion now. */
  --slide-fill-scale: 1.045;
  --dur-video-fade: 0.6s; /* poster -> trailer cross-fade, no flash on swap */
  --dur-hero-video-in:  0.9s;  /* the hero's stage is 16:9: slower than a   */
  --dur-hero-video-out: 2.2s;  /* card, and it leaves slower than it arrives */
  /* Pagination. The slot is fixed so the row cannot reflow (see hero.css);
     it is also the active pill's width and the pitch between dots, so it
     is the one number that sets how tight the group reads. 44 left 34px of
     air between 10px dots; 26 leaves 16. */
  --dot-slot: 26px;
  --dot-size: 10px;

  /* How far the page steps aside while a trailer plays and the pointer is
     still. Exactly a rail's bottom padding, so nothing can collide. */
  --cinema-drop: 64px;
  --dur-cinema:  0.6s;

  /* ---- Hero rhythm ------------------------------------------------------
     Dwell is the time an item holds before advancing. The Ken Burns drift
     runs slightly longer than dwell + transition so it never visibly stops
     and restart-snaps mid-view.                                            */
  --dwell:          7s;
  --dur-kenburns:   9.5s;
  --dur-dot:        0.5s;    /* active pill sliding between positions       */
  --dur-nav-fade:   0.35s;   /* arrows fading up on hover                   */
  --dur-rail-page:  0.62s;   /* a rail travelling to its next page          */
  --dur-modal-in:   0.42s;   /* detail modal arriving                       */
  --dur-modal-out:  0.24s;   /* and leaving — quicker, it is a dismissal    */
  --dur-tab:        0.34s;   /* the segmented control's indicator sliding   */
  /* Swapping tab panels is a sequence, not a cross-fade: the outgoing set
     has to be gone before the incoming one arrives, or the two read as
     one pile of overlapping content. The body's height travels across
     both halves, so the box is still settling as the new panel resolves. */
  --dur-tab-out:    0.18s;
  --dur-tab-in:     0.26s;
  --dur-tab-swap:   0.44s;   /* = out + in; the body height's own travel   */
  --dur-cw-fill:    0.9s;    /* a Continue Watching bar growing to value    */
  --dur-trailer:    0.32s;   /* hover preview opening                       */
  --dur-trailer-grow: 0.58s; /* the card morphing to preview size           */
  --ease-grow:      cubic-bezier(0.22, 0.8, 0.28, 1);  /* swift, settles    */

  /* ---- Hover-preview morph ---------------------------------------------
     The growth leaves from rest and arrives at rest — both ends eased, so
     the box never starts or stops at speed. Collapsing is quicker but uses
     the same shape, so retracting reads as the same gesture reversed.     */
  --ease-morph-in:  cubic-bezier(0.34, 0.02, 0.16, 1);
  --ease-morph-out: cubic-bezier(0.45, 0.02, 0.18, 1);
  --dur-morph-out:  0.42s;

  /* The chrome does not arrive with the box. It waits for the growth to be
     mostly done, then resolves in a short stagger, which is what gives the
     open a beat of stillness in the middle instead of one flat move.      */
  --delay-chrome:   0.30s;
  --dur-chrome:     0.34s;
  /* Leaving is quicker than arriving, so the box is bare again before it
     starts retracting — the reverse of "grow, hold, furnish". */
  --dur-chrome-out:   0.18s;
  /* The exit runs the stagger backwards — last line in, first line out —
     at a tighter interval, so leaving is the same gesture, not an erasure. */
  --chrome-stagger-out: 0.04s;
  --chrome-depth:       4;    /* highest --chrome-i, for reversing the order */
  --chrome-stagger: 0.06s;
  --chrome-lift:    6px;     /* how far each line settles up into place    */

  /* Poster time before the trailer starts, and the beat before it resolves
     back to the still at the end of the clip. Mirrors the hero's rhythm.  */
  --trailer-poster-hold: 2s;

  /* Metadata moves on its own rhythm: it leaves fast and early, then
     settles back in after the artwork has already started travelling.
     Read "ease-in on enter / ease-out on exit" as a gentle arrival and a
     gentle departure — swap these two curves to re-tune that feel.        */
  --ease-meta-in:  cubic-bezier(0.22, 1, 0.36, 1);   /* long controlled settle */
  --ease-meta-out: cubic-bezier(0.4, 0, 0.6, 1);     /* gentle, never snatched */
  --dur-meta-in:   0.95s;
  --dur-meta-out:  0.42s;
  --delay-meta-in: 0.42s;    /* the offset from the image transition        */
  --meta-stagger:  0.09s;
  /* The audio control lands one beat after the buttons, last thing in the
     panel to arrive: --delay-meta-in + --meta-stagger * 4. */
  --delay-mute-in: 0.78s;    /* the audio control, one beat after the buttons */
  --meta-blur:     10px;     /* resolves out of focus, not sliding      */
  --dur-minimal:   0.7s;     /* panel collapsing while a trailer plays  */     /* resolves out of focus, rather than sliding  */
  --dur-overlay: 0.2s;
  --dur-outline: 0.2s;
  --dur-ring:    0.15s;
}