/* ==========================================================================
   Netflix Mobile — Typography tokens
   Brand face is "Netflix Sans" — now SELF-HOSTED from user-uploaded files
   (see tokens/fonts.css). "Hanken Grotesk" (Google Fonts) is kept only as a
   graceful fallback in the stack. SF Pro (iOS system chrome) is now SELF-HOSTED
   too (SF Pro Text .otf, tokens/fonts.css), with the Apple system stack as
   fallback.
   Text scale transcribed from the "Typography" specimen: caption 1 = 12,
   label 3 = 14, label 2 = 16, label 1 = 18, header 1 = 32.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700;800&display=swap');

:root {
  /* --- Families ----------------------------------------------------------- */
  --font-brand: "Netflix Sans", "Hanken Grotesk", -apple-system,
                BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
                sans-serif;
  --font-system: -apple-system, "SF Pro", BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- Weights ------------------------------------------------------------ */
  --weight-light:  300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold:   700;

  /* --- Type scale (px, verbatim) ----------------------------------------- */
  --font-caption-2:  10px; /* micro labels, badges */
  --font-caption-1:  12px; /* caption / tab label */
  --font-label-3:    14px; /* small button / list row */
  --font-label-2:    16px; /* body / primary button */
  --font-label-1:    18px; /* emphasis label */
  --font-header-3:   20px;
  --font-header-2:   24px;
  --font-header-1:   32px; /* display */

  /* --- Line height -------------------------------------------------------- */
  --leading-tight: 100%; /* the kit sets nearly all runs to 100% */
  --leading-snug:  120%;
  --leading-body:  140%;

  /* --- Letter spacing (verbatim) ----------------------------------------- */
  --tracking-tight: -0.5px;
  --tracking-cta:   -0.25px; /* buttons / captions */
  --tracking-normal: 0;
  --tracking-tab:    0.25px; /* tab labels */
}

/* ==========================================================================
   Text-style utility classes — the kit's named text styles
   ========================================================================== */

.nfx-header-1 {
  font-family: var(--font-brand);
  font-weight: var(--weight-bold);
  font-size: var(--font-header-1);
  line-height: var(--leading-tight);
}
.nfx-label-1 {
  font-family: var(--font-brand);
  font-weight: var(--weight-medium);
  font-size: var(--font-label-1);
  line-height: var(--leading-tight);
}
.nfx-label-2 {
  font-family: var(--font-brand);
  font-weight: var(--weight-medium);
  font-size: var(--font-label-2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-cta);
}
.nfx-label-3 {
  font-family: var(--font-brand);
  font-weight: var(--weight-medium);
  font-size: var(--font-label-3);
  line-height: var(--leading-tight);
}
.nfx-caption-1 {
  font-family: var(--font-brand);
  font-weight: var(--weight-light);
  font-size: var(--font-caption-1);
  line-height: var(--leading-tight);
}
.nfx-tab-label {
  font-family: var(--font-brand);
  font-weight: var(--weight-bold);
  font-size: var(--font-caption-1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tab);
}