@layer tokens, base, layout, components, sections, theme;

@layer tokens {

  
  :root {
    
    --n-bg:          #0e1116;
    --n-panel:       #161b22;
    --n-panel-2:     #1c232c;
    --n-panel-3:     #222a34;
    --n-line:        #2a323d;

    
    
    
    
    --n-seam:        rgba(0, 0, 0, .5);

    
    --n-edge:      inset 0 1px 0 rgba(255, 255, 255, .06);
    --n-edge-soft: inset 0 1px 0 rgba(255, 255, 255, .045);
    --n-sheen: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 120px);
    --n-text:        #e7ecf3;
    --n-muted:       #8b97a8;

    --n-accent:      #4da3ff;
    --n-accent-dim:  #1e3a5c;
    --n-focus-fill:  #f2f6fb;
    --n-focus-text:  #0e1116;
    --n-ok:          #5ad19b;
    --n-danger:      #ff6b6b;

    
    --n-hue:         #75c5d1;
    --n-hue-ground:  #68b0ba;

    
    
    --tvs: 1;
    --tvt: 1;

    --n-s1:  calc(4px  * var(--tvs));
    --n-s2:  calc(8px  * var(--tvs));
    --n-s3:  calc(12px * var(--tvs));
    --n-s4:  calc(16px * var(--tvs));
    --n-s5:  calc(24px * var(--tvs));
    --n-s6:  calc(32px * var(--tvs));
    --n-s7:  calc(48px * var(--tvs));
    --n-s8:  calc(72px * var(--tvs));

    
    --n-gutter: 16px;

    
    --n-rail-w:       64px;
    
    --n-rail-w-open: calc(76px + 57px * var(--ts));

    
    
    --n-pill-bg:     color-mix(in srgb, var(--n-panel) 92%, transparent);
    --n-pill-line:   color-mix(in srgb, var(--n-text) 14%, transparent);
    --n-pill-shadow: 0 12px 30px -10px rgba(0, 0, 0, .75);
    
    --n-pill-h:      70px;
    --n-pill-clear:  calc(var(--n-pill-h) + var(--n-s3) + var(--n-s4) + var(--n-sab));
    --n-cat-w:       260px;
    --n-ch-w:        340px;
    --n-ch-give:      37px;   
    --n-row-h:        44px;
    --n-row-h-2:      56px;
    --n-bar-h:        56px;
    --n-drawer-w:    340px;

    
    --n-sbw: 0px;

    
    --n-card-min:   150px;
    
    --n-card-w:     132px;
    --n-card-gap:    14px;
    --n-card-radius:  8px;

    
    --n-r-chip:     6px;
    --n-r-card:     8px;
    --n-r-panel:   12px;
    --n-r-pill:   999px;

    
    --n-font:         "Literata", Georgia, system-ui, -apple-system, sans-serif;
    --n-font-display: "Literata", Georgia, system-ui, serif;
    --n-font-data:    ui-monospace, "SF Mono", "Segoe UI Mono", monospace;

    
    --ts: 1;
    --n-fs-meta:    calc(11.5px * var(--ts) * var(--tvt));
    --n-fs-cap:     calc(13px   * var(--ts) * var(--tvt));
    --n-fs-body:    calc(15px   * var(--ts) * var(--tvt));
    --n-fs-body-lg: calc(17px   * var(--ts) * var(--tvt));
    --n-fs-rail:    calc(20px   * var(--ts) * var(--tvt));
    --n-fs-page:    calc(26px   * var(--ts) * var(--tvt));
    --n-fs-hero:    calc(40px   * var(--ts) * var(--tvt));

    
    --n-lh-cap:   calc(16px * var(--ts) * var(--tvt));

    
    --n-fade:     44px;

    --n-lh-tight: 1.08;
    --n-lh-head:  1.18;
    --n-lh-body:  1.6;

    
    --n-t-press:  120ms;
    --n-t-focus:  120ms;
    --n-t-hover:  220ms;
    --n-t-panel:  180ms;
    --n-t-fade:   250ms;
    --n-t-drawer: 320ms;
    --n-t-hero:   420ms;

    --n-ease:     cubic-bezier(.2, .7, .3, 1);
    --n-ease-out: cubic-bezier(.3, .8, .3, 1);

    
    --n-dwell: 300ms;

    
    --n-lift-1: none;
    --n-lift-2: 0 24px 60px -28px rgba(0, 0, 0, .9);
    --n-lift-3: 0 40px 90px -40px rgba(0, 0, 0, 1);

    
    --n-sat: env(safe-area-inset-top, 0px);
    --n-sab: env(safe-area-inset-bottom, 0px);
    --n-sal: env(safe-area-inset-left, 0px);
    --n-sar: env(safe-area-inset-right, 0px);
  }

  
  [data-section="live"]   { --n-hue: #75c5d1; --n-hue-ground: #68b0ba; }
  [data-section="movies"] { --n-hue: #4fba64; --n-hue-ground: #4fba64; }
  [data-section="series"] { --n-hue: #b2d978; --n-hue-ground: #8fab60; }
  [data-section="mylist"] { --n-hue: #decc73; --n-hue-ground: #b4a55c; }
  [data-section="search"] { --n-hue: #75c5d1; --n-hue-ground: #68b0ba; }

  
  @media (min-width: 700px) {
    :root { --n-gutter: 28px; --n-card-min: 150px; --n-card-w: 150px;
            --n-rail-gap: var(--n-s6); }
  }
  @media (min-width: 1200px) {
    :root { --n-gutter: 40px; --n-card-min: 172px; --n-card-w: 200px;
            --n-rail-gap: var(--n-s7); }
  }
  @media (min-width: 1600px) {
    
    :root { --n-gutter: 56px; --n-card-min: 290px; --n-card-w: 230px;
            --n-card-gap: 22px; }
  }
  
  html[data-shell="tv"] {
    --n-gutter: 56px;
    --n-card-min: 250px;
    --n-card-w: 250px;
    --n-card-gap: 26px;
    --n-rail-gap: var(--n-s7);
  }

  @media (min-width: 2400px) {
    :root {
      
      --n-gutter: 80px; --n-card-min: 300px; --n-card-w: 300px;
      --n-card-gap: 30px;
      --n-rail-gap: var(--n-s8);
      --n-bar-h: 64px;
      
      --ts: 1.5;
    }
  }
}



@layer tokens {
  
  html[data-shell="tv"] {
    
    --tvs: 1.2;

    
    --tvt: 1.5;

    
    --n-tv-safe-y: 54px;
    --n-tv-safe-x: 96px;
  }
}

@layer theme {

  

  
  :root[data-boot-theme="black"],
  :root[data-boot-theme="black"] body,
  body[data-theme="black"] {
    --n-top: #3d3d3d;   
    --n-hue: #D8D8D8; --n-hue-ground: #D8D8D8;
    --n-accent: #D8D8D8; --n-accent-dim: #2A2A2A;
    --n-bg: #0a0a0a; --n-panel: #141414; --n-panel-2: #1a1a1a; --n-panel-3: #212121;
    --n-line: #262626;
  }

  
  

  
  
  body {
    
    --n-top: #161f2f;
    background-color: #0A0D13;
    background-image:
      radial-gradient(150% 95% at 50% -26%, rgba(120, 162, 226, .058), transparent 78%),
      linear-gradient(177deg,
        #121A28 0%, #111826 18%, #0E1421 42%, #0C1119 70%, #090D14 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
  }

  
  
  :root[data-boot-theme="black"] body,
  body[data-theme="black"] {
    background-color: #040404;
    background-image:
      radial-gradient(140% 88% at 50% -22%, rgba(255, 255, 255, .075), transparent 74%),
      linear-gradient(177deg, #222222 0%, #1D1D1D 20%, #151515 44%, #0C0C0C 70%, #040404 100%);
  }
  :root[data-boot-theme="black"] body .content,
  body[data-theme="black"] .content {
    background-color: transparent;
    background-image: linear-gradient(180deg,
      rgba(255, 255, 255, .075) 0%, rgba(255, 255, 255, .045) 30%,
      rgba(255, 255, 255, .022) 62%, rgba(0, 0, 0, .20) 100%);
  }


  
  
  @media (min-width: 1201px) {
    .rail {
      background-color: rgba(255, 255, 255, .028);
      background-image: none;
    }
    @media (max-height: 500px) {
      .rail { background-color: rgba(255, 255, 255, .034); }
    }
    

    
    html[data-shell="tv"] .rail {
      background-color: transparent;
      background-image: none;
    }

    
    
  }

  
  :root[data-boot-theme] body,
  body[data-theme] {
    background-attachment: fixed;
    background-repeat: no-repeat;
  }

  

  
  @media (prefers-contrast: more) {
    :root {
      
      --n-muted: var(--n-text);
      --n-line:  rgba(255, 255, 255, .30);
      
      
    }
    
    html[data-shell="tv"] .grow:focus-visible,
    html[data-shell="tv"] .cats-list .grow:focus-visible {
      box-shadow: inset 6px 0 0 0 var(--n-hue);
    }
  }

  
  
  :root {
    --n-sec-live:   #75c5d1;
    --n-sec-movies: #4fba64;
    --n-sec-series: #b2d978;
    --n-sec-mylist: #decc73;
  }
  html body[data-section="live"]   { --n-hue: var(--n-sec-live);   --n-hue-ground: #68b0ba; }
  html body[data-section="movies"] { --n-hue: var(--n-sec-movies); --n-hue-ground: #4fba64; }
  html body[data-section="series"] { --n-hue: var(--n-sec-series); --n-hue-ground: #8fab60; }
  html body[data-section="mylist"] { --n-hue: var(--n-sec-mylist); --n-hue-ground: #b4a55c; }
  html body[data-section="search"] { --n-hue: var(--n-sec-live);   --n-hue-ground: #68b0ba; }

}




:root[data-boot-font="atkinson"],
:root[data-boot-font="atkinson"] body,
body[data-font="atkinson"] {
  --n-font:         "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --n-font-display: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
}