/* ==========================================================================
   Netflix Mobile — Color tokens
   Values transcribed verbatim from the Figma "Colours" specimen frame.
   ========================================================================== */

:root {
  /* --- Primary (brand red) ------------------------------------------------ */
  --red-light-1: #df7375; /* rgb(223,115,117) — soft/tint red */
  --red:         #d22f26; /* rgb(210,47,38)  — brand red, primary CTA */
  --red-dark-1:  #b1060f; /* deep red */
  --red-logo:    #d81f26; /* rgb(216,31,38)  — Netflix mark red */
  --red-badge:   #b42824; /* rgb(180,40,36)  — badge fill (NEW EPISODES) */

  /* --- Neutral ------------------------------------------------------------ */
  --white:        #ffffff;
  --grey-light-1: #b2b2b2;
  --grey-light-2: #cbcbcb;
  --grey-light-3: #e6e6e6;
  --grey:         #737373;
  --grey-dark-1:  #323232; /* control surfaces */
  --grey-dark-2:  #191919;
  --grey-dark-3:  #010101;
  --black:        #000000;

  /* Extended neutrals observed in component usage */
  --ink-020202:   #020202; /* rgb(2,2,2)   — button/tab surfaces */
  --ink-323232:   #323232;
  --grey-999:     #999999; /* rgb(153,153,153) — inactive tab label */
  --grey-cbc:     #cbcbcb; /* disabled text */
  --grey-e6:      #e6e6e6; /* active tab label */
  --grey-f4:      #f4f4f4; /* rgb(244,244,244) — light specimen bg */
  --grey-9e:      #9e9e9e; /* rgb(158,158,158) — secondary icon/text */

  /* --- System ------------------------------------------------------------- */
  --system-red:  #fe0202;
  --system-blue: #4b6aea;

  /* ========================================================================
     Semantic aliases — reference these in components
     ======================================================================== */

  /* Surfaces (product runs on true black) */
  --surface-app:      var(--black);
  --surface-raised:   var(--ink-020202);
  --surface-control:  var(--grey-dark-1);
  --surface-inverse:  var(--white);
  --surface-scrim:    rgba(0, 0, 0, 0.6);

  /* Text */
  --text-primary:     var(--white);
  --text-secondary:   var(--grey-light-1);
  --text-tertiary:    var(--grey);
  --text-inactive:    var(--grey-999);
  --text-active:      var(--grey-e6);
  --text-on-light:    var(--black);
  --text-disabled:    var(--grey-cbc);
  --text-link:        var(--white);

  /* Interactive */
  --accent:           var(--red);
  --accent-pressed:   var(--red-dark-1);
  --cta-fill:         var(--red);
  --cta-text:         var(--white);
  --focus-ring:       var(--system-blue);

  /* Borders / dividers */
  --border-subtle:    #d9d9d9; /* rgb(217,217,217) — specimen hairline */
  --border-control:   rgba(255, 255, 255, 0.35);
}