/* ==========================================================================
   Netflix Mobile — Spacing, radius, elevation, layout tokens
   Values transcribed from the kit's auto-layout gaps/padding and geometry.
   The kit uses a loose 4/8/16 rhythm with several off-grid values (5, 6, 44).
   ========================================================================== */

:root {
  /* --- Spacing scale ------------------------------------------------------ */
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5:  12px;
  --space-6:  16px;  /* dominant screen gutter + control padding */
  --space-7:  24px;
  --space-8:  32px;
  --space-9:  48px;
  --space-10: 56px;
  --space-11: 64px;  /* specimen frame padding */

  /* Screen gutter (iOS content inset) */
  --gutter: 16px;

  /* --- Radius ------------------------------------------------------------- */
  --radius-xs:  2px;  /* buttons, small badges */
  --radius-sm:  5px;  /* cards, control panels */
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-pill: 20px; /* round icon buttons */
  --radius-full: 9999px;

  /* --- Hit targets -------------------------------------------------------- */
  --hit-min: 44px; /* iOS minimum tap target */
  --button-large-h: 44px;
  --button-small-h: 30px;

  /* --- Elevation / shadows ------------------------------------------------ */
  /* Play/pause glyph drop shadows lifted from the kit */
  --shadow-glyph-lg: 4px 4px 16px 0 rgba(0, 0, 0, 0.87);
  --shadow-glyph-sm: 2.24px 2.24px 8.96px 0 rgba(0, 0, 0, 0.87);
  --shadow-card:     0 4px 16px 0 rgba(0, 0, 0, 0.5);

  /* --- Protection gradients (over artwork) -------------------------------- */
  --scrim-bottom: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%); /* @kind color */
  --scrim-top:    linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); /* @kind color */
  --scrim-hero:   linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%); /* @kind color */

  /* --- Device metrics (iPhone X+ portrait) -------------------------------- */
  --device-w: 390px;
  --device-h: 844px;
  --statusbar-h: 44px;
  --homeindicator-h: 34px;
  --tabbar-h: 49px;
}